Essayez d'implémenter l'affichage écran à écran dans votre application Capacitor ? Vous n'avez pas besoin d'astuces, de plugins ou de solutions de contournement. Capacitor dispose d'une prise en charge officielle de l'affichage écran à écran via l'option de configuration - il s'agit simplement d'une fonctionnalité peu documentée. adjustMarginsForEdgeToEdge Beaucoup de développeurs ont du mal avec les layouts écran à écran 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 à écran. Mais il existe une méthode plus simple et native.
Beaucoup de développeurs ont du mal avec les layouts écran à écran dans les applications Capacitor, surtout lorsqu'elles visent Android 15+. Ils ont souvent recours à des plugins ou des hacks CSS pour obtenir l'apparence moderne écran à écran. Mais il existe une méthode plus simple et native.
Qu'est-ce qu'une Affichage de bord à bord ?
L'affichage de bord à bord 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 d'interface utilisateur plus immersive et moderne.
La Solution Officielle : ajuster les marges pour l'affichage de bord à bord
Capacitor fournit l'option de configuration spécifique à cet effet. Cela est documenté dans la documentation de configuration Capacitor officielle adjustMarginsForEdgeToEdge Comment le configurer official Capacitor config documentationou
Ou en format JSON :
Options de configuration capacitor.config.ts Options de configuration 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;Options de configuration
{
"appId": "com.example.app",
"appName": "My App",
"webDir": "dist",
"android": {
"adjustMarginsForEdgeToEdge": "auto"
}
}Options de configuration
L'option accepte trois valeurs : adjustMarginsForEdgeToEdge Option recommandée
1. "auto" Ce qu'il fait :
adjustMarginsForEdgeToEdge: 'auto'Vérifie automatiquement Android 15+ et la configuration. Ajuste les marges de manière intelligente en fonction du dispositif et de la configuration. windowOptOutEdgeToEdgeEnforcement Meilleur pour :
La plupart des applications de production qui veulent une bordure égale sur les appareils pris en charge tout en maintenant la compatibilité avec les anciennes versions d'Android. Ce qu'il fait :
2. "force"
adjustMarginsForEdgeToEdge: 'force'Force les ajustements de marges pour une bordure égale, quel que soit la version d'Android ou les autres paramètres. Meilleur pour :
Les applications qui veulent un comportement bordure égale sur toutes les versions d'Android prises en charge. Option recommandée
3. "disable"
adjustMarginsForEdgeToEdge: 'disable'Ce qu'il fait : Désactive complètement les ajustements automatiques des marges.
Meilleur pour : Les applications qui gèrent manuellement la disposition de bordure à bordure ou qui ne veulent pas de comportement de bordure à bordure.
Remarque : Actuellement "disable" est la valeur par défaut, mais cela changera à "auto" en Capacitor 8.
Pourquoi cela compte pour Android 15+
À partir d'Android 15, Google impose le comportement de la disposition de bordure à bordure par défaut. Les applications qui ne gèrent pas correctement les dispositions de bordure à bordure peuvent rencontrer des problèmes de UI comme :
- Contenu caché derrière les barres système
- Écart et espacement inconfortables
- Apparence incohérente sur les appareils
- Expérience utilisateur décevante
En utilisant l'official adjustMarginsForEdgeToEdge config, vous vous assurez que votre application gère ces changements correctement sans un code personnalisé.
Exemple complet
Ici est 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 écran à écran, 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é adjustMarginsForEdgeToEdge, testez votre application sur :
- Appareils Android 15+ - Vérifiez que le contenu respecte correctement les barres système
- Versions d'Android plus anciennes - Assurez la compatibilité inverse
- Tailles d'écran différentes - Vérifiez que les dispositions fonctionnent sur plusieurs appareils
- Thèmes clairs et sombres - Testez les deux modes de thème
Erreurs courantes à éviter
N'utilisez pas de 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.
N'associez pas avec des implémentations manuelles
If vous utilisez adjustMarginsForEdgeToEdgeSupprimez tout traitement manuel des marges d'interface de fenêtre ou les hacks CSS que vous avez ajoutés.
N'oubliez pas la mise en forme de la zone de sécurité
La configuration gère les ajustements de marge, mais vous devez toujours utiliser les marges de sécurité CSS pour un affichage de contenu correct.
Guide de migration
Si vous utilisez actuellement des plugins ou des hacks pour une écran entier:
- Supprimez les plugins d'écran entier de vos dépendances
- Ajoutez l'option de configuration à votre
capacitor.config.ts - Nettoyez et reconstruisez votre projet Android
- Testez soigneusement sur les appareils cibles
# Clean the Android project
npx cap sync android
cd android
./gradlew clean
cd ..
# Rebuild
npx cap copy android
npx cap open androidPré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 maquettes sur les appareils avec écran écran à bords écrasés
Ressources supplémentaires
- Documentation officielle du fichier de configuration Capacitor
- Lignes directrices Android Edge-to-Edge
- CSS Inclusions de zone sûre
Conclusion
La mise en page écran-to-écran dans Capacitor ne nécessite pas de plugins, de hacks ou de solutions complexes. L'option de configuration fournit une solution native et propre qui est officiellement prise en charge et futuriste. adjustMarginsForEdgeToEdge Commencez par
pour la plupart des applications, testez soigneusement sur plusieurs appareils et ajoutez les CSS appropriés pour les zones sûres. Votre application sera prête pour Android 15 et au-delà avec un effort minimal. "auto" Questions ou en train de rencontrer des problèmes ?
La communauté __CAPGO_KEEP_0__ et The Capacitor community and La communauté __CAPGO_KEEP_0__ et la documentation officielle Les ressources sont excellentes pour obtenir de l'aide supplémentaire.
Continuez de l'Edge-to-Edge Display en Capacitor Sans Plugins
Si vous utilisez Edge-to-Edge Display en Capacitor Sans Plugins pour planifier le comportement de médias et d'interface natifs, connectez-le avec Utilisez @capgo/capacitor-activités-en-vivre pour la capacité native dans Utilisez @capgo/capacitor-activités-en-vivre, @capgo/capacitor-activités-en-vivre pour le détail d'implémentation dans @capgo/capacitor-activités-en-vivre, Utilisez @capgo/capacitor-joueur-de-videos pour la capacité native dans Utilisez @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.
