Essayez d'implémenter un affichage Edge-to-Edge dans votre application Capacitor ? Vous n'avez pas besoin de trucs, de plugins ou de workarounds. Capacitor propose une prise en charge officielle de l'affichage Edge-to-Edge via l'option de configuration - ce n'est tout simplement pas bien documenté. adjustMarginsForEdgeToEdge De nombreux développeurs ont du mal avec les layouts Edge-to-Edge dans les applications __CAPGO_KEEP_0__, surtout lorsqu'elles visent Android 15+. Ils ont souvent recours à des plugins personnalisés ou des trucs CSS pour obtenir l'apparence moderne Edge-to-Edge. Mais il existe une meilleure façon, 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 Edge-to-Edge 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. À partir d'Android 15, Google pousse l'affichage Edge-to-Edge comme standard pour toutes les applications.
La Solution Officielle : ajuster les marges pour l'affichage Edge-to-Edge
__CAPGO_KEEP_0__ fournit l'option de configuration spécifique à cet effet. Cela est documenté dans la documentation de configuration __CAPGO_KEEP_0__ officielle
Capacitor provides the adjustMarginsForEdgeToEdge Configuration de l'affichage Edge-to-Edge dans __CAPGO_KEEP_0__ Essayez d'implémenter un affichage Edge-to-Edge dans votre application Capacitor ?, mais c'est facile à manquer.
Comment le Configurer
Ajoutez ceci à 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;Ou en format JSON :
{
"appId": "com.example.app",
"appName": "My App",
"webDir": "dist",
"android": {
"adjustMarginsForEdgeToEdge": "auto"
}
}Options de Configuration
La adjustMarginsForEdgeToEdge option accepte trois valeurs :
1. "auto" (Recommandé)
adjustMarginsForEdgeToEdge: 'auto'Ce qu'il fait : Vérifie automatiquement Android 15+ et le windowOptOutEdgeToEdgeEnforcement paramètre. Ajuste les marges intelligemment en fonction de l'appareil et de la configuration.
Meilleur pour : La plupart des applications de production qui souhaitent une affichage de bord à bord 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 une affichage de bord à bord, quel que soit la version Android ou les autres paramètres.
Meilleur pour : Les applications qui souhaitent un comportement de bord à bord sur toutes les versions Android prises en charge.
3. "disable"
adjustMarginsForEdgeToEdge: 'disable'Ce qu'il fait : Désactive complètement les ajustements de marges automatiques.
Meilleur pour : Les applications qui gèrent manuellement la disposition de bord à bord ou qui ne souhaitent pas un comportement de bord à bord.
Remarque : Actuellement "disable" est la valeur par défaut, mais cela changera en "auto" 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 d'interface utilisateur comme :
- Contenu caché derrière les barres système
- Écartement et marge maladroits
- Apparence incohérente sur différents appareils
- Expérience utilisateur défectueuse
En utilisant la configuration officielle adjustMarginsForEdgeToEdge config, vous vous assurez que votre application gère ces changements correctement sans code personnalisé.
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 à l'égard de l'arête, vous pouvez avoir besoin d'ajouter certaines règles 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 :
- Les appareils Android 15+ - Vérifiez que le contenu respecte correctement les barres système
- Les versions Android plus anciennes - Assurez-vous de la compatibilité inversée
- Les différentes tailles d'écran - Vérifiez que les dispositions fonctionnent sur différents appareils
- Les thèmes clair et sombre - Tester les deux modes de thème
Les Erreurs à Eviter
Ne Pas Utiliser 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 finement granulaire 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éter la configuration native sans la remplacer.
Ne Mélanger Avec Des Implementations Manuelles adjustMarginsForEdgeToEdgeSi vous utilisez , supprimez tout le traitement manuel des insets de fenêtre ou les hacks CSS que vous avez ajoutés.
Don’t Forget CSS d’aire sûre
La configuration gère les ajustements de marge, mais vous devez toujours utiliser les insets CSS d'aire sûre pour un padding de contenu correct.
Guide de migration
Si vous utilisez actuellement des plugins ou des hacks pour l'edge-to-edge :
- Supprimez tout plugin d'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 cibles
# Clean the Android project
npx cap sync android
cd android
./gradlew clean
cd ..
# Rebuild
npx cap copy android
npx cap open androidPrévision de l'avenir
N'oubliez pas que Capacitor 8 fixera la valeur par défaut. "auto" Pour vous 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
- Documentation officielle du Capacitor Config
- Directives Android Edge-to-Edge
- CSS Inclusions de Zone Sûre
Conclusion
Affichage Edge-to-edge dans Capacitor n'exige pas de plugins, de trucs ou de solutions compliquées. L'option de configuration fournit une solution native propre et futuriste, officiellement supportée. adjustMarginsForEdgeToEdge Démarrez avec
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 la The Capacitor community and sont de grandes ressources pour obtenir de l'aide supplémentaire. Continuez avec Affichage Edge-to-Edge dans __CAPGO_KEEP_0__ Sans Plugins
Keep going from Edge-to-Edge Display in Capacitor Without Plugins
Si vous utilisez Edge-to-Edge Display in Capacitor Without Plugins pour planifier le comportement natif des médias et de l'interface, connectez-l’à En utilisant @capgo/capacitor-activités-en-vivre pour la capacité native en utilisant En @capgo/capacitor-activités-en-vivre En @capgo/capacitor-activités-en-vivre pour le détail d'implémentation en @capgo/capacitor-activités-en-vivre En utilisant @capgo/capacitor-joueur-de-videos pour la capacité native en utilisant En @capgo/capacitor-joueur-de-videos En @capgo/capacitor-joueur-de-videos pour le détail d'implémentation en @capgo/capacitor-joueur-de-videos, et En utilisant @capgo/capacitor-navigation-native pour la capacité native en utilisant @capgo/capacitor-navigation native.
