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

Trying to implement edge-to-edge display in your Capacitor app? 必要なのは、Capacitor にはエッジ・トゥ・エッジ・ディスプレイの公式サポートが用意されています。 adjustMarginsForEdgeToEdge エッジ・トゥ・エッジ・ディスプレイとは何か

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.

エッジ・トゥ・エッジ・ディスプレイの公式解決策：adjustMarginsForEdgeToEdge

__CAPGO_KEEP_0__ にはエッジ・トゥ・エッジ・ディスプレイの公式サポートが用意されています。

__CAPGO_KEEP_0__

Capacitor adjustMarginsForEdgeToEdge 特定目的のためにこの設定オプションが用意されています。この設定方法は公式の__CAPGO_KEEP_0__設定ドキュメントに記載されています。公式の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;

HTMLテキストのフラグメントです。長いCapgo UIの文字列の親キーは`alternatives_cta_questions`です。ページ/エリア: Capacitorライブアップデートの代替方法比較ページ。役割: マーケティングまたは法的文章。見つける場所: page alternatives.astro。Capgo製品/ブランド名と開発者用語をそのまま保存する。

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

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

または adjustMarginsForEdgeToEdge HTMLテキストのフラグメントです。長いCapgo UIの文字列の親キーは`appflow_cta_questions`です。ページ/エリア: Appflow比較/移行マーケティングコピー。役割: 長いマーケティングまたは法的文章。見つける場所: page ionic-appflow.astro。Capgo製品/ブランド名と開発者用語をそのまま保存する。

1. `"auto"` Capacitorライブアップデートの代替方法

adjustMarginsForEdgeToEdge: 'auto'

または、Capawesome比較ページ。役割: 長いマーケティングまたは法的文章。見つける場所: page capwesome.astro。Capgo製品/ブランド名と開発者用語をそのまま保存する。メッセージキーは`capwesome_cta_questions`です (Capwesome CTA Questions)。| HTMLテキストのフラグメントです。長いCapgo UIの文字列の親キーは`consulting_faq_subtitle`です。ページ/エリア: コンサルティングサービスページ。役割: セクションサブタイトルまたはタグライン。見つける場所: page consulting.astro。Capgo製品/ブランド名と開発者用語をそのまま保存する。メッセージキーは`consulting_faq_subtitle`です (Consulting FAQ Subtitle)。| Appflow比較/移行マーケティングコピー。役割: 短いUIラベルまたはナビゲーションアイテム。見つける場所: page ionic-appflow.astro、page ionic-enterprise-plugins.astro、page solutions/ionic-enterprise-plugins.astro。メッセージキーは`appflow_plugins_or`です (Appflow Plugins Or)。自動でAndroid 15以上をチェックし、 windowOptOutEdgeToEdgeEnforcement 設定を調整します。デバイスと設定に応じて、余白を賢く調整します。

最適なものは: 主に、Androidの古いバージョンと互換性を維持しながら、サポートされるデバイスでエッジからエッジまでの表示を実現したいアプリ向けです。

2. `"force"`

adjustMarginsForEdgeToEdge: 'force'

これが何をするのか: エッジからエッジまでの表示を実現するために、Androidのバージョンや他の設定に関係なく、余白の調整を強制します。

最適なものは: すべてのサポートされているAndroidバージョンでエッジからエッジまでの表示を実現したいアプリ向けです。

3. `"disable"`

adjustMarginsForEdgeToEdge: 'disable'

これが何をするのか: 自動で余白の調整を完全に無効にします。

最適なものは: エッジからエッジまでのレイアウトを手動で管理したい、またはエッジからエッジまでの表示を実現したくないアプリ向けです。

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

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

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

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

configを使用することで、アプリがこれらの変更を適切に処理できるようにすることができます。 adjustMarginsForEdgeToEdge 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以上のデバイス

- システムバーに適切に従うコンテンツを確認する 古いAndroidバージョン
- バックワード・コンパティビリティを確保する 異なる画面サイズ
Different screen sizes - デバイス間でレイアウトが機能することを確認する
ライトとダークのテーマ - どちらのテーマモードもテストする

共通のミスを避ける

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

第三者プラグインのような capacitor-edge-to-edge @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-ナビゲーションバー adjustMarginsForEdgeToEdge, @capgo/capacitor-navigation-bar @__CAPGO_KEEP_0__/ホームインジケーター @capgo/home-indicator 手動実装と組み合わせない

@__CAPGO_KEEP_0__

Capacitorを使用している場合 adjustMarginsForEdgeToEdge、手動のウィンドウインセットのハンドリングやCSSのハックを削除してください。

安全なエリアのCSSを忘れないでください。

マイグレーションガイド

現在、エッジツーヘッジのプラグインやハックを使用している場合

プラグインを削除してください

依存関係から削除してください オプションを追加してください
プロジェクト プロジェクトをクリーンアップしてビルドしてください capacitor.config.ts
Androidプロジェクト マイグレーションガイド
徹底にテストする 対象機器でテストする

# 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" 8 を準備するために

今すぐテストする "auto" 早期に問題を発見するために 安全なエリアを適切に処理するために CSS を更新する
エッジをエッジに有効化されたデバイスでレイアウトを確認する レイアウトを確認する
安全なエリアを適切に処理するために CSS を更新する 今すぐテストする

追加リソース

結論

Capacitorでエッジツーヨーロッジアプリを作成するには、プラグイン、ハック、複雑なワークアラウンドは必要ありません。 adjustMarginsForEdgeToEdge 設定オプションは、オフィシャルサポートされており、将来の互換性を保証するクリーンでネイティブなソリューションを提供します。

始めに "auto" ほとんどのアプリでは、デバイスをテストし、適切なセーフエリアCSSを追加し、Android 15以降に対応するために最小限の努力でアプリを準備します。

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

から始めて、Capacitorにエッジからエッジのディスプレイを実装するにはプラグインなし

が利用されている場合 Edge-to-Edge Display in Capacitor Without Plugins を使用して、ネイティブメディアとインターフェイスの動作を計画するには、__CAPGO_KEEP_0__に接続します。を使用して、@capgo/capacitor-live-activities のネイティブ機能のために、@capgo/capacitor-live-activities の実装詳細のために、@capgo/capacitor-live-activities を使用して、@capgo/capacitor-video-player のネイティブ機能のために、@capgo/capacitor-video-player の実装詳細のために、@capgo/capacitor-video-player @capgo/capacitor-video-player Capacitorエッジ・ツー・エッジ表示の実装詳細については、@capgo/capacitor-ビデオプレーヤーの Using @capgo/capacitor-native-navigation for the native capability in Using @capgo/capacitor-native-navigation.

プラグインなしでCapacitorのエッジツゥエッジ表示を設定する