Capacitorでプラグインなしのエッジ・トゥ・エッジ・ディスプレイ

Capacitorアプリでエッジ・トゥ・エッジ表示を実現しようとしている場合 プラグインやハック、ワークアラウンドは必要ありません。Capacitorはエッジ・トゥ・エッジ表示に対して公式のサポートを提供しており、設定オプションは広く知られていないだけです。 adjustMarginsForEdgeToEdge 多くの開発者は、__CAPGO_KEEP_0__アプリでエッジ・トゥ・エッジレイアウトを実現する際に、特にAndroid 15+を対象にした場合に苦労しています。彼らは、現代的なエッジ・トゥ・エッジ表示を実現するために、カスタムプラグインやCSSハックを使用することが多くなっています。ただし、より適切でネイティブの方法が存在します。

Many developers struggle with edge-to-edge layouts in Capacitor apps, especially when targeting Android 15+. They often resort to custom plugins or CSS hacks to achieve the modern edge-to-edge look. But there’s a better, native way.

エッジ・トゥ・エッジ表示は、アプリのコンテンツをシステムバー（ステータスバーとナビゲーションバー）後ろに延長することで、よりインマージブで現代的なUI体験を実現します。Android 15から始まって、Googleはすべてのアプリでエッジ・トゥ・エッジ表示を標準として推進しています。

公式の解決策: adjustMarginsForEdgeToEdge']}

__CAPGO_KEEP_0__のエッジ・トゥ・エッジ表示を適切に設定する方法を学びましょう。__CAPGO_KEEP_0__アプリで公式のadjustMarginsForEdgeToEdge設定オプションを使用することで、プラグインやハックは必要ありません。

Capacitorは提供する adjustMarginsForEdgeToEdge この目的のために特に設定オプションを提供します。これは公式の__CAPGO_KEEP_0__設定ドキュメント official Capacitor config documentation設定方法

このを追加してください

または capacitor.config.ts JSON形式で capacitor.config.json:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'My App',
  webDir: 'dist',
  android: {
    adjustMarginsForEdgeToEdge: 'auto' // or 'force' or 'disable'
  }
};

export default config;

設定オプション

{
  "appId": "com.example.app",
  "appName": "My App",
  "webDir": "dist",
  "android": {
    "adjustMarginsForEdgeToEdge": "auto"
  }
}

オプションは3つの値を受け入れます:

(推奨) adjustMarginsForEdgeToEdge __CAPGO_KEEP_0__

1. "auto" __CAPGO_KEEP_0__

adjustMarginsForEdgeToEdge: 'auto'

機能すること: Android 15 以降と設定を自動で確認し、デバイスと設定に応じて余白を適切に調整します。 windowOptOutEdgeToEdgeEnforcement 適しているもの:

Android 15 以降をサポートするデバイスでエッジからエッジまでの表示を実現したいが、古いバージョンの Android をサポートしたい開発者向け 機能すること:

2. "force"

adjustMarginsForEdgeToEdge: 'force'

Android のバージョンや他の設定に関係なく、エッジからエッジまでの表示を強制します。 適しているもの:

すべてのサポートする Android バージョンでエッジからエッジまでの表示を実現したい開発者向け 機能すること:

3. "disable"

adjustMarginsForEdgeToEdge: 'disable'

自動で余白の調整を完全に無効にします。 適しているもの:

すべての Android バージョンをサポートしながら、エッジからエッジまでの表示を実現したい開発者向け Android 15 以降でエッジツーヨーロードレイアウトをサポートしないアプリ

注意: 現在はデフォルトですが、__CAPGO_KEEP_0__ 8 では "disable" なります。 "auto" in Capacitor 8.

Android 15 から、Google はエッジツーヨーロード表示をデフォルトの動作として強制しています。エッジツーヨーロードレイアウトを適切にサポートしていないアプリでは、以下のような UI 問題が発生する可能性があります。

システムバーの後ろにコンテンツが隠れる

• 不自然なスペースとパディング
• デバイス間で不一致の外観
• ユーザー体験が悪化する
• 公式

adjustMarginsForEdgeToEdge configを設定すると、アプリはこれらの変更に対応するように適切に動作するようにすることができます。 code をカスタムする必要はありません。

完全な例

ここに、最新の Capacitor アプリの完全な例の設定があります。

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'My Awesome App',
  webDir: 'www',
  server: {
    androidScheme: 'https'
  },
  android: {
    // Enable edge-to-edge automatically on supported devices
    adjustMarginsForEdgeToEdge: 'auto',

    // Other Android config options...
    backgroundColor: '#ffffff'
  }
};

export default config;

CSSの考慮事項

エッジからエッジまでの表示を使用する場合、安全なエリアを処理するためにCSSを追加する必要がある場合があります。

/* Add padding for system bars */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Or use viewport-fit */
meta[name="viewport"] {
  content: "width=device-width, initial-scale=1, viewport-fit=cover";
}

設定をテストする

設定を終了したら、アプリを以下のデバイスでテストしてください。 adjustMarginsForEdgeToEdgeAndroid 15+デバイス

1. - システムバーに適切に従って、コンテンツが適切に表示されることを確認する 古いAndroidバージョン
2. - バックワード互換性を確保する __CAPGO_KEEP_0__
3. 異なる画面サイズ - デバイス間でレイアウトが機能することを確認する
4. ライトとダークのテーマ - 両方のテーマモードをテストする

よくある間違い

この機能にはプラグインを使用しないでください

Capacitor のネイティブ設定では、この機能をクリーンに実装しています。 capacitor-edge-to-edge マニュアル実装と混ぜないでください

Capacitor を使用している場合、

、に追加したマニュアルのウィンドウインセットのハンドリングやCSSハックを削除してください。 adjustMarginsForEdgeToEdgeセーフエリアのCSSを忘れないでください

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__

移行ガイド

__CAPGO_KEEP_1__

1. Edge-to-Edgeのプラグインを削除する 依存関係からEdge-to-Edgeのプラグインを削除する
2. configオプションを追加する configオプションをプロジェクトに追加する capacitor.config.ts
3. Androidプロジェクトをクリーンアップし、再構築する ターゲットデバイスで徹底的にテストする
4. 将来の準備 Edge-to-Edgeのプラグインやハックを使用している場合

# Clean the Android project
npx cap sync android
cd android
./gradlew clean
cd ..

# Rebuild
npx cap copy android
npx cap open android

__CAPGO_KEEP_0__

Capacitor 8 を使用するとデフォルト値になります。準備するには: "auto" テスト用に

1. 現在 "auto" 早期に問題を発見するために 安全なエリアを適切に処理するためにCSSを更新する
2. エッジツゥエッジ機能が有効になっているデバイスでレイアウトを確認する 追加リソース
3. 公式 __CAPGO_KEEP_0__ 設定ドキュメント Android エッジツゥエッジ ガイドライン

__CAPGO_KEEP_0__

• Capacitor
• __CAPGO_KEEP_0__
• CSS セーフ エリア インセット

まとめ

Capacitor でエッジツーヨーロッジアプリを作成する場合、プラグイン、ハック、複雑なワークアラウンドは必要ありません。 adjustMarginsForEdgeToEdge __CAPGO_KEEP_0__ の設定オプションは、オフィシャルサポートを受けている、クリーンでネイティブな解決策を提供します。

基本的なアプリを作成するには "auto" ほとんどのアプリでは、デバイスを横断して徹底的にテストし、適切なセーフエリア CSS を追加してください。Android 15 以降に対応するために、最小限の労力でアプリを準備できます。

質問や問題が発生した場合は Capacitor のコミュニティと公式ドキュメント は、追加のヘルプのために素晴らしいリソースです。 著者