Essayez d'implémenter un affichage de bordure à bordure dans votre application Capacitor ? Vous n'avez pas besoin d'astuces, de plugins ou de solutions de contournement. Capacitor propose une prise en charge officielle de l'affichage de bordure à bordure via l'option de configuration - ce n'est toutefois pas très bien documentée. adjustMarginsForEdgeToEdge Beaucoup de développeurs ont du mal avec les layouts de bordure à bordure 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 de la bordure à bordure. 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 de bordure à bordure 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 de bordure à bordure comme standard pour toutes les applications.
La Solution Officielle : ajuster les marges pour l'affichage de bordure à bordure
__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 Edge-to-edge display allows your app content to extend behind system bars (status bar and navigation bar), creating a more immersive, modern UI experience. Starting with Android 15, Google is pushing edge-to-edge as the standard for all apps. official Capacitor config documentationmais 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 sous forme de JSON :
{
"appId": "com.example.app",
"appName": "My App",
"webDir": "dist",
"android": {
"adjustMarginsForEdgeToEdge": "auto"
}
}Options de Configuration
Le 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 veulent une é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 marge pour l'écran écran quel que soit la version Android ou les autres paramètres.
Meilleur pour : Les applications qui veulent un comportement écran écran sur toutes les versions Android prises en charge.
3. "disable"
adjustMarginsForEdgeToEdge: 'disable'Ce qu'il fait : Désactive complètement les ajustements de marge automatiques.
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 la mise en page écran bord à bord comme comportement par défaut. Les applications qui ne gèrent pas correctement les mises en page écran bord à bord peuvent rencontrer des problèmes d'interface utilisateur comme :
- Contenu caché derrière les barres système
- Écartement et espacement maladroits
- Apparence incohérente sur différents appareils
- Expérience utilisateur dégradée
En utilisant la configuration officielle adjustMarginsForEdgeToEdge Vous vous assurez que votre application gère ces changements correctement sans avoir besoin de 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 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é adjustMarginsForEdgeToEdge, testez votre application sur :
- Appareils Android 15+ - Vérifiez que le contenu respecte correctement les barres système
- Versions Android plus anciennes - Assurez la compatibilité inverse
- Diverses tailles d'écran - Vérifiez que les dispositions fonctionnent sur différents appareils
- Thèmes clairs et sombres - Tester les deux modes de thème
Malfaçons 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/indicateur de domicile complétez la configuration native sans la remplacer.
N'Assimilez pas avec les implémentations manuelles
Si vous utilisez adjustMarginsForEdgeToEdge, supprimez tout le traitement manuel des marges de fenêtre ou les hacks CSS que vous avez ajoutés.
N'oubliez pas le CSS de zone de sécurité
La configuration gère les ajustements de marge, mais vous devez toujours utiliser les insets 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 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 cibles
# Clean the Android project
npx cap sync android
cd android
./gradlew clean
cd ..
# Rebuild
npx cap copy android
npx cap open androidPrévoyance à long terme
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 la fonctionnalité d'écran écran écran activée
Ressources supplémentaires
- Documentation officielle du Capacitor Config
- Lignes directrices Android Edge-to-Edge
- CSS Inclusions de zone sûre
Conclusion
L'affichage Edge-to-Edge dans Capacitor n'exige pas de plugins, de trucs ou de complexe contournement. 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 des CSS appropriés pour les zones sûres. Votre application sera prête pour Android 15 et au-delà avec un minimum d'efforts. "auto" Questions ou en train de rencontrer 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 de l'affichage Edge-to-Edge dans __CAPGO_KEEP_0__ sans plugins
Keep going from Edge-to-Edge Display in Capacitor Without Plugins
Si vous utilisez Affichage de bord à bord dans Capacitor Sans plugins pour planifier le comportement de médias et d'interface natifs, connectez-le avec Utilisation de @capgo/capacitor-activités-en-ligne pour la capacité native dans Utilisation de @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, Utilisation de @capgo/capacitor-joueur-de-videos pour la capacité native dans Utilisation de @capgo/capacitor-joueur-de-videos, @capgo/capacitor-joueur-de-videos pour le détail d'implémentation dans @capgo/capacitor-joueur-de-videos, et Utilisation de @capgo/capacitor-navigation-native pour la capacité native en utilisant @capgo/capacitor-native-navigation.
