Edge-to-Edge Display in Capacitor Without Plugins

Capacitorアプリでエッジをエッジに表示する方法を実装しようとしている場合 必要なのはハック、プラグイン、ワークアラウンドなどはありません。Capacitorには、エッジをエッジに表示するための公式のサポートがあります。 adjustMarginsForEdgeToEdge 設定オプション - ただし、広く知られていないためです。

多くの開発者は、Capacitorアプリでエッジをエッジに表示する方法を探しています。特にAndroid 15+をターゲットにしている場合、カスタムプラグインやCSSハックを使用して、モダンなエッジをエッジの表示を実現しています。ただし、より自然な方法があります。

Edge-to-Edge表示とは?

Edge-to-edge表示では、システムバー(ステータスバーとナビゲーションバー)の後ろにアプリのコンテンツを延長することができます。これにより、よりインマーシブでモダンなUI体験が実現されます。Android 15以降、GoogleはすべてのアプリにEdge-to-edgeを標準として推進しています。

公式の解決策: adjustMarginsForEdgeToEdge

Capacitorは、この目的のために特に設計された設定オプションを提供します。これは、公式のCapacitor設定ドキュメントに記載されています。 adjustMarginsForEdgeToEdge 設定オプションを確認するのは簡単ではありません。 official Capacitor config documentationこのコードを追加します。

または

JSON形式で追加します。 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;

Or in JSON format:

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

Configuration Options

The adjustMarginsForEdgeToEdge __CAPGO_KEEP_0__

1. `"auto"` (Recommended)

adjustMarginsForEdgeToEdge: 'auto'

What it does: Android 15以上と設定を自動で確認し、デバイスと設定に応じて余白を適切に調整します。 windowOptOutEdgeToEdgeEnforcement Best for:

主にAndroid 15以上をサポートする端末で、エッジからエッジまでの表示を実現したい開発者向けです。 What it does:

2. `"force"`

adjustMarginsForEdgeToEdge: 'force'

Androidのバージョンやその他の設定に関係なく、余白の調整を強制します。 Best for:

すべてのサポートするAndroidバージョンでエッジからエッジまでの表示を実現したい開発者向けです。 Forces margin adjustments for edge-to-edge regardless of Android version or other settings.

3. `"disable"`

adjustMarginsForEdgeToEdge: 'disable'

What it does: 自動マージン調整を完全に無効化します。

Best for: エッジツーヨーロードレイアウトを手動で管理するアプリや、エッジツーヨーロードの動作を避けるアプリ。

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

Why This Matters for Android 15+

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

システムバーの後ろにコンテンツが隠れる
不自然なスペースとパディング
Inconsistent appearance across devices
ユーザー体験が悪い

公式の 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以上のデバイス

Android 15以上のデバイス - システムバーを尊重するようにコンテンツを確認する
Older Android versions - バックワード互換性を確保する
Different screen sizes - デバイス間でレイアウトが機能することを確認する
Light and dark themes - 2 つのテーマモードをテストする

Common Mistakes to Avoid

Don’t Use Plugins for This

You don’t need third-party plugins like capacitor-edge-to-edge __CAPGO_KEEP_0__ or similar. The native config handles this cleanly.

Don’t Mix with Manual Implementations

If you’re using __CAPGO_KEEP_0__ in Japanese, remove any manual window insets handling or CSS hacks you may have added. adjustMarginsForEdgeToEdge__CAPGO_KEEP_1__ を使用している場合、日本語の __CAPGO_KEEP_0__ を削除してください。

Don’t Forget Safe Area CSS

セーフエリアCSSを忘れないでください。

The config handles margin adjustments, but you still need to use CSS safe area insets for proper content padding.

設定はマージン調整を管理していますが、適切なコンテンツパディングのために、CSSセーフエリアインセットを使用する必要があります。

Migration Guide 移行ガイド
If you’re currently using plugins or hacks for edge-to-edge: Edge-to-edge のプラグインまたはハックを現在使用している場合: capacitor.config.ts
Remove any edge-to-edge plugins 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

将来の対策

Capacitor 8 をデフォルト値にすることで、 "auto" 準備するには:

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

追加リソース

まとめ

Capacitorでエッジトゥエッジディスプレイはプラグイン、ハック、複雑なワークアラウンドなしで実現できます。 adjustMarginsForEdgeToEdge 設定オプションは、公式サポートを受け、将来性のあるクリーンでネイティブなソリューションを提供します。

ほとんどのアプリでは、__CAPGO_KEEP_0__から始め、各種デバイスで徹底的にテストし、適切なセーフエリアCSSを追加してください。Android 15以降に対応するために、最小限の努力でアプリを準備できます。 "auto" 質問や問題が発生した場合は?

__CAPGO_KEEP_0__コミュニティと公式ドキュメントを参照してください。 Capacitor __CAPGO_KEEP_0__ は、追加のヘルプのための素晴らしいリソースです。

Capacitor でのエッジからエッジまでの表示を、プラグインなしで継続してください。

あなたが使用している場合 Capacitor でのエッジからエッジまでの表示を、プラグインなしで継続してください。 ネイティブのメディアとインターフェイスの動作を計画するには、接続してください。 @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 実装詳細については @capgo/capacitor-video-player に記載されています。 Using @capgo/capacitor-native-navigation を使用します。 Using @capgo/capacitor-native-navigation を使用して、ネイティブ機能を実装します。

Capacitorでエッジをエッジに表示する方法 - プラグインなし