Affichage bord à bord dans Capacitor sans plugins

Essayez-vous de mettre en œuvre l'affichage écran édge à édge dans votre Capacitor application ? Vous n'avez pas besoin d'aucune astuce, de plugins ou de solutions de contournement. Capacitor propose une prise en charge officielle de l'affichage écran édge à édge par l'intermédiaire de l'option de configuration - ce n'est tout simplement pas bien documenté. adjustMarginsForEdgeToEdge De nombreux développeurs ont du mal avec les layouts écran édge à édge dans les applications __CAPGO_KEEP_0__, surtout lorsqu'elles visent Android 15+. Ils ont souvent recours à des plugins ou des hacks CSS pour obtenir l'apparence moderne écran édge à édge. Mais il existe une meilleure solution native.

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.

L'affichage écran édge à édge permet à votre contenu d'application de s'étendre derrière les barres système (barre de statut et barre de navigation), créant une expérience utilisateur plus immersive et moderne. À partir d'Android 15, Google pousse l'affichage écran édge à édge comme standard pour toutes les applications.

La Solution Officielle : ajuster les marges pour l'affichage écran édge à édge

__CAPGO_KEEP_0__ fournit la

Capacitor provides the adjustMarginsForEdgeToEdge option de configuration spécifique à cet usage. Cela est documenté dans le documentation de configuration officielle Capacitormais il est facile de le manquer.

Comment le Configurer

Ajoutez cela à votre capacitor.config.ts ou 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;

context : fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `alternatives_cta_questions`). Page/zone : page de comparaison des alternatives de mise à jour en direct de Capacitor. Rôle : Paragraphe marketing ou juridique long. Voir dans : page alternatives.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `alternatives_cta_questions` (Questions de CTA Alternatives). | Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `appflow_cta_questions`). Page/zone : page de comparaison/migration de Appflow. Rôle : Paragraphe marketing ou juridique long. Voir dans : page ionic-appflow.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `appflow_cta_questions` (Questions de CTA Appflow). | Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `capwesome_cta_questions`). Page/zone : page de comparaison de Capawesome. Rôle : Paragraphe marketing ou juridique long. Voir dans : page capwesome.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `capwesome_cta_questions` (Questions de CTA Capwesome). | Page/zone : page de services de consulting. Rôle : Sous-titre ou tagline de section. Voir dans : page consulting.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `consulting_faq_subtitle` (Sous-titre FAQ de consulting). | Page/zone : page de comparaison/migration d'Appflow. Rôle : Étiquette de navigation ou élément de navigation court. Voir dans : page ionic-appflow.astro, page ionic-enterprise-plugins.astro, page solutions/ionic-enterprise-plugins.astro. Clé de message `appflow_plugins_or` (Appflow Plugins ou).

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

Ou sous forme JSON :

Options de Configuration adjustMarginsForEdgeToEdge L'

1. `"auto"` option accepte trois valeurs :

adjustMarginsForEdgeToEdge: 'auto'

(Recommandé) Vérifie automatiquement Android 15+ et le windowOptOutEdgeToEdgeEnforcement ajuste les marges de manière intelligente en fonction de l'appareil et de la configuration.

Meilleur pour : La plupart des applications de production qui veulent une écran écran écran sur les appareils pris en charge tout en maintenant la compatibilité avec les versions Android plus anciennes.

2. `"force"`

adjustMarginsForEdgeToEdge: 'force'

Ce qu'il fait : Force les ajustements de marges pour l'écran écran écran, quel que soit la version Android ou les autres paramètres.

Meilleur pour : Les applications qui veulent un comportement écran écran écran sur toutes les versions d'Android prises en charge.

3. `"disable"`

adjustMarginsForEdgeToEdge: 'disable'

Ce qu'il fait : Désactive complètement les ajustements automatiques de marges.

Meilleur pour : Les applications qui gèrent manuellement la disposition écran écran ou qui ne veulent pas de comportement écran écran.

Remarque : Actuellement "disable" est la valeur par défaut, mais cela changera en "auto" en Capacitor 8.

Pourquoi cela compte pour Android 15+

À partir d'Android 15, Google impose l'affichage sans bords comme comportement par défaut. Les applications qui ne gèrent pas correctement les dispositions sans bords peuvent rencontrer des problèmes de UI comme :

Contenu caché derrière les barres système
Écartement et marge maladroits
Apparence incohérente sur différents appareils
Expérience utilisateur dégradée

En utilisant la configuration officielle, vous vous assurez que votre application gère ces changements correctement sans __CAPGO_KEEP_0__ personnalisé. adjustMarginsForEdgeToEdge config, you ensure your app handles these changes properly without custom code.

Exemple complet

Voici un exemple de configuration complète pour une application moderne 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;

Considérations CSS

Lors de l'utilisation d'une affichage bord à bord, vous devrez peut-être ajouter du CSS pour gérer les zones de sécurité :

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

Testez votre configuration

Après avoir configuré adjustMarginsForEdgeToEdgetestez votre application sur :

Appareils Android 15+ - Vérifiez que le contenu respecte correctement les barres système
Versions Android plus anciennes - Assurez-vous de la compatibilité en arrière-plan
Tailles d'écran différentes - Vérifiez que les layouts fonctionnent sur plusieurs appareils
- Thèmes clair et sombre - Testez les deux modes de thème

Erreurs courantes à éviter

N'Utilisez pas les plugins pour cela

Vous n'avez pas besoin de plugins tiers comme capacitor-edge-to-edge ou similaires. La configuration native gère cela de manière propre. Si vous avez besoin d'un contrôle fin sur le chrome système après avoir activé adjustMarginsForEdgeToEdge, @capgo/capacitor-barre de navigation et @capgo/home-indicator @__CAPGO_KEEP_0__/indicateur de page d'accueil

complétez la configuration native sans la remplacer.

If vous utilisez adjustMarginsForEdgeToEdge, supprimez tout le traitement manuel des marges d'interface de fenêtre ou les hacks CSS que vous avez ajoutés.

N'oubliez pas les CSS de zone de sécurité

La configuration gère les ajustements de marge, mais vous devez toujours utiliser les marges de zone de sécurité CSS pour un étalement de contenu correct.

Guide de migration

Si vous utilisez actuellement des plugins ou des hacks pour l'edge-to-edge :

Supprimez tout les plugins edge-to-edge de vos dépendances
ajoutez l'option de configuration à votre capacitor.config.ts
Nettoyez et reconstruisez votre projet Android
Testez soigneusement sur les appareils ciblés

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

# Rebuild
npx cap copy android
npx cap open android

Prévoyance

N'oubliez pas que Capacitor 8 fera "auto" la valeur par défaut. Pour se préparer :

Testez avec "auto" maintenant pour détecter les problèmes dès le début
Mettez à jour votre CSS pour gérer les zones de sécurité correctement
Vérifiez vos layouts sur les appareils avec écran écran écran activé

Ressources supplémentaires

Conclusion

L'affichage Edge-to-Edge dans Capacitor ne nécessite pas de plugins, de trucs ou de solutions complexes. L'option de configuration fournit une solution native propre et futuriste qui est officiellement prise en charge. adjustMarginsForEdgeToEdge Commencez par

pour la plupart des applications, testez soigneusement sur plusieurs appareils et ajoutez des CSS de zone sûre appropriés. Votre application sera prête pour Android 15 et au-delà avec un minimum d'efforts. "auto" Questions ou rencontrez des problèmes ?

La communauté de __CAPGO_KEEP_0__ et The Capacitor community and La communauté de __CAPGO_KEEP_0__ et la documentation officielle ressources supplémentaires pour obtenir de l'aide.

Continuez à partir de l'affichage Edge-to-Edge dans Capacitor sans plugins.

Si vous utilisez L'affichage Edge-to-Edge dans Capacitor sans plugins. pour planifier le comportement des médias et de l'interface natifs, connectez-l’à En utilisant @capgo/capacitor-activités-en-ligne pour la capacité native dans En utilisant @capgo/capacitor-activités-en-ligne, @capgo/capacitor-activités-en-ligne pour le détail d'implémentation dans @capgo/capacitor-activités-en-ligne, En utilisant @capgo/capacitor-joueur-de-videos pour la capacité native dans En utilisant @capgo/capacitor-joueur-de-videos, @capgo/capacitor-joueur-de-videos pour les détails d'implémentation dans @capgo/capacitor-player vidéo, et En utilisant @capgo/capacitor-navigation native pour la capacité native dans En utilisant @capgo/capacitor-navigation native.

Edge-to-Edge Display in Capacitor Without Plugins