エッジツーヨーロッコディスプレイのCapacitorにプラグインなし

Capacitorアプリでエッジ・トゥ・エッジ・ディスプレイを実装しようとしている場合 プラグイン、ワークアラウンド、ハックなしで実現できます。Capacitorはエッジ・トゥ・エッジ・ディスプレイに対応しています。 adjustMarginsForEdgeToEdge エッジ・トゥ・エッジ・ディスプレイの設定オプションは、広く知られていない

多くの開発者は、Capacitorアプリでエッジ・トゥ・エッジ・レイアウトを実現するのに苦労しています。特にAndroid 15+をターゲットにすると、カスタムプラグインやCSSハックを使用してモダンなエッジ・トゥ・エッジの見た目を実現する必要があります。しかし、より自然な方法があります。

エッジ・トゥ・エッジ・ディスプレイとは何ですか?

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

公式ソリューション: adjustMarginsForEdgeToEdge

Capacitorは、この目的のために adjustMarginsForEdgeToEdge __CAPGO_KEEP_0__の公式設定ドキュメントに記載されています Capacitor、しかし、簡単に逃すことができます。

Capacitorを設定する方法

Capacitorに追加する capacitor.config.ts または 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;

Capacitorライブアップデートの代替

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

Capacitorライブアップデートの代替

Capawesomeの代替 adjustMarginsForEdgeToEdge Capawesomeの代替

1. `"auto"` コンサルティングサービス

adjustMarginsForEdgeToEdge: 'auto'

Capacitor Capacitorの設定オプション windowOptOutEdgeToEdgeEnforcement Capacitorの設定オプションの選択肢は3つあります。

最適です: 主に、Android の古いバージョンと互換性のあるデバイスで、端から端までの表示を実現したい開発者向けです。

2. `"force"`

adjustMarginsForEdgeToEdge: 'force'

機能すること: 端から端までの表示を実現するために、Android のバージョンやその他の設定に関係なく、マージン調整を強制します。

最適です: すべてのサポートされている Android バージョンで端から端までの表示を実現したい開発者向けです。

3. `"disable"`

adjustMarginsForEdgeToEdge: 'disable'

機能すること: 自動マージン調整を完全に無効にします。

最適です: 端から端までのレイアウトを手動で管理したい、または端から端までの表示を実現したくない開発者向けです。

注意: 現在 "disable" はデフォルトですが、この設定は "auto" in Capacitor 8.

Android 15以降のために重要なこと

Android 15以降、Googleはエッジツゥエッジディスプレイをデフォルトの動作として強制しています。エッジツゥエッジレイアウトを適切に処理していないアプリでは、次のようなUI問題が発生する可能性があります。

システムバーの後ろに隠れたコンテンツ
不自然なスペースとパディング
デバイス間で不一致な外観
ユーザー体験が悪い

公式 adjustMarginsForEdgeToEdge config, you ensure your app handles these changes properly without custom code.

を必要とせずに、エッジツゥエッジレイアウトの変更に対応できます。

Here’s a complete example configuration for a modern Capacitor app:

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";
}

設定をテストする

設定を済ませた後 adjustMarginsForEdgeToEdge, 以下のデバイスでアプリをテストしてください:

Android 15 以降のデバイス - システムバーに適切にコンテンツが反映されているか確認する
古い Android のバージョン - バックワード・コンパチビリティを確保する
異なる画面サイズ - デバイス間でレイアウトが機能することを確認する
ライトとダークのテーマ - 2 つのテーマモードをテストする

共通のミスを避ける

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

第三者のプラグイン capacitor-edge-to-edge Capacitor のネイティブ設定では、この機能をきれいに処理できます。第三者のプラグイン adjustMarginsForEdgeToEdge, @capgo/capacitor-ナビゲーションバーと @capgo/ホームインジケーターネイティブ設定を補完することなく、機能します。

ネイティブ設定と混ぜない

Capacitor のネイティブ設定を使用している場合 adjustMarginsForEdgeToEdgeネイティブ設定を使用している場合、手動でウィンドウのインセットを処理したり、CSS のハックを追加したりしないでください。

安全領域のCSSを忘れないでください

設定はマージン調整を取り扱っていますが、適切なコンテンツパディングのために、CSSの安全領域のインセットを使用する必要があります。

移行ガイド

Capgoマーケティングウェブサイトのページ/エリア: Capgoマーケティングウェブサイト。役割: ショートUIラベルまたはナビゲーションアイテム。表示: コンポーネントAppflowShutdown.astro。メッセージキー`migration_guide` (移行ガイド)。

現在、エッジツゥエッジプラグインまたはハックを使用している場合: プラグインを削除する
依存関係から削除する 設定オプションを追加する capacitor.config.ts
あなたの プロジェクトをクリーンアップし、再構築する
ターゲットデバイスで徹底的にテストする __CAPGO_KEEP_0__

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

# Rebuild
npx cap copy android
npx cap open android

将来を予測する

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

現在 "auto" 早期に問題を発見するために CSS を更新する
安全なエリアを適切に処理するために レイアウトをレビューする
エッジをエッジに有効化されたデバイスで 追加リソース

公式 __CAPGO_KEEP_0__ 設定ドキュメント

結論

Edge-to-edge ディスプレイの Capacitor では、プラグイン、ハック、複雑なワークアラウンドが必要ありません。 adjustMarginsForEdgeToEdge 設定オプションは、公式サポートを受け、将来性のあるクリーンでネイティブな解決策を提供します。

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

質問や問題が発生した場合は? Capacitor コミュニティと公式ドキュメントは、追加のヘルプのための素晴らしいリソースです。 Edge-to-Edge ディスプレイの __CAPGO_KEEP_0__ から続けて

Keep going from Edge-to-Edge Display in Capacitor Without Plugins

If you are using Edge-to-Edge Display in Capacitor Without Plugins to plan native media and interface behavior, connect it with Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player, and Using @capgo/capacitor-native-navigation native capability in Using @capgo/capacitor-native-navigation.

Capacitorでエッジ・トゥ・エッジ表示を実現する

エッジ・トゥ・エッジ・ディスプレイとは何ですか?

公式ソリューション: adjustMarginsForEdgeToEdge

Capacitorを設定する方法

Capacitorライブアップデートの代替

1. "auto" コンサルティングサービス

2. "force"

3. "disable"

Android 15以降のために重要なこと

を必要とせずに、エッジツゥエッジレイアウトの変更に対応できます。

CSS の考慮事項

設定をテストする

共通のミスを避ける

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

ネイティブ設定と混ぜない

安全領域のCSSを忘れないでください

移行ガイド

将来を予測する

公式 __CAPGO_KEEP_0__ 設定ドキュメント

結論

Keep going from Edge-to-Edge Display in Capacitor Without Plugins

1. `"auto"` コンサルティングサービス

2. `"force"`

3. `"disable"`