En-tête sous l'horloge
Votre en-tête fixe commence tout en haut de l'écran, si bien que les icônes de la barre d'état se posent sur votre logo et votre bouton de menu.
Ce qui a changé avec Android 15 et Android 16
Pour les apps qui ciblent Android 15 (niveau d'API 35), Android 15 affiche l'app edge-to-edge (bord à bord) par défaut. La barre d'état et la barre de navigation par gestes deviennent transparentes, et le système ne repousse plus votre contenu sous elles ; avec la navigation à trois boutons, la barre est translucide. Sauf si l'app applique les insets de la fenêtre, une partie de son contenu se retrouve sous les barres système. La méthode traditionnelle pour colorer la barre d'état, setStatusBarColor, est obsolète et n'a plus d'effet sous Android 15 pour ces apps.
Android 15 proposait encore une désactivation temporaire via un attribut de thème. Pour les apps qui ciblent Android 16 (niveau d'API 36), cette désactivation est obsolète et désactivée sur les appareils Android 16. Google Play exige que les nouvelles apps et les mises à jour ciblent le niveau d'API 36 ; un nouvel import n'a donc plus aucune échappatoire : l'app doit gérer les insets.
Ce que montre la Play Console
Les problèmes d'edge-to-edge n'arrivent pas sous forme de refus classique au titre des règles. Ils apparaissent comme des recommandations sur le tableau de bord des versions, avec des titres comme « Edge-to-edge may not display for all users » et « Your app uses deprecated APIs or parameters for edge-to-edge ». La seconde liste des appels comme Window.setStatusBarColor ou setNavigationBarColor et les classes d'où ils partent, qui sont souvent des bibliothèques plutôt que votre propre code.
Le vrai risque, c'est ce que voient les gens : une icône de menu sous l'horloge qu'on ne peut pas toucher, ou un bouton de paiement derrière la barre de gestes. Un examinateur peut considérer cela comme une fonctionnalité défaillante, et les utilisateurs le mentionneront à coup sûr dans leurs avis. Le guide sur les fonctionnalités défaillantes couvre les autres problèmes des apps encapsulées le jour du lancement.
Les symptômes dans une app web encapsulée
Barre d'onglets derrière la barre de gestes
Une barre de navigation en position: fixed; bottom: 0 se retrouve sous la barre de gestes ou la barre à trois boutons, et les touches atteignent la barre système à la place.
Icônes de la barre d'état invisibles
Avec une barre transparente, des icônes blanches sur une page blanche, ou des icônes noires sur une page sombre, disparaissent.
Double marge
Le shell natif et votre CSS ajoutent tous deux de l'espace pour les barres, ce qui laisse une épaisse bande vide en haut ou en bas.
Clavier qui recouvre les champs
Les champs en bas d'un formulaire passent sous le clavier quand la mise en page ignore le viewport visuel.
Mon WebView iOS est enfin approuvé. Merci !!
Choisir un seul responsable des insets
| Configuration | Réglages Android de WebViewGold | Votre CSS |
|---|---|---|
| Le shell natif garde la page sous les barres (recommandé pour la plupart des apps) | TRANSPARENT_STATUS_BAR sur false : une barre d'état opaque dans la couleur colorPrimaryDark de style.xml ; blackStatusBarText pour des icônes sombres sur une couleur claire | Rien d'obligatoire. Gardez le CSS de safe area ci-dessous comme filet de sécurité ; quand le shell maintient déjà la page à l'écart des barres, il ne devrait ajouter aucun espace supplémentaire. Vérifiez une fois sur un appareil. |
| La page s'affiche derrière la barre d'état (vrai plein écran) | TRANSPARENT_STATUS_BAR sur true | viewport-fit=cover dans la balise meta viewport, une marge env(safe-area-inset-top) sur l'en-tête et l'inset du bas sur les barres fixes en bas |
| Navigation native en bas | ENABLE_NAVIGATION_FOOTER sur true, entrées dans res/menu/menu_drawer.xml | Masquez votre propre barre d'onglets fixe dans l'app pour que les deux ne s'empilent pas |
| Écrans immersifs (vidéo, jeux, borne) | hidebars://on et hidebars://off depuis JavaScript | Les barres reviennent d'un balayage depuis le bord ; gardez les commandes importantes à l'écart des bords |
Un CSS compatible edge-to-edge pour votre app web
Ajoutez d'abord viewport-fit=cover à la balise meta viewport : <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">. Ajoutez ensuite aux éléments fixes une marge égale aux insets de safe area. Le même CSS fonctionne dans l'app iOS ; le guide safe area de la guideline 4.0 couvre les réglages iOS.
css
:root {
--inset-top: env(safe-area-inset-top, 0px);
--inset-bottom: env(safe-area-inset-bottom, 0px);
--inset-left: env(safe-area-inset-left, 0px);
--inset-right: env(safe-area-inset-right, 0px);
}
/* En-tête fixe : le contenu commence sous la barre d'état */
.app-header {
position: sticky;
top: 0;
padding-top: calc(12px + var(--inset-top));
padding-left: calc(16px + var(--inset-left));
padding-right: calc(16px + var(--inset-right));
}
/* Barre d'onglets fixe : reste au-dessus de la barre de gestes ou de la barre à boutons */
.tab-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding-bottom: calc(8px + var(--inset-bottom));
}
/* De la place pour la barre d'onglets, et des unités de viewport dynamiques au lieu de 100vh */
main {
min-height: 100dvh;
padding-bottom: calc(72px + var(--inset-bottom));
}Corriger étape par étape
Environ une heure, dont l'essentiel en tests sur deux émulateurs.
Mettez à jour le modèle au lieu de relever le targetSdk
Les anciens projets WebViewGold ciblaient un niveau d'API inférieur à 35 et n'ont jamais eu à gérer l'edge-to-edge. Relever le chiffre à la main fait l'impasse sur le code qui va avec. Le modèle actuel inclut le travail sur la barre d'état pour Android 15 (changelog à partir de la version 16.4) ainsi que des améliorations ultérieures de la barre d'état ; reportez vos réglages comme le décrit le guide sur le niveau d'API cible, ou recompilez dans le Cloud Builder.
Décidez qui gère les insets
Pour la plupart des apps en vibe coding, la configuration native est la plus sûre :
TRANSPARENT_STATUS_BARsur false et la couleur de votre marque commecolorPrimaryDark. Ne choisissez la configuration transparente que si votre design a besoin de contenu derrière la barre d'état, et gérez alors les insets dans le CSS de manière cohérente.Réglez les couleurs et le contraste des icônes
Réglez
blackStatusBarTexten fonction de votre couleur. Si la couleur change selon la page (mode sombre, bandeau d'accueil coloré), basculez-la depuis JavaScript avecstatusbarcolor://R,G,Betstatusbartextcolor://whiteoustatusbartextcolor://black;bottombarcolor://etnavbartextcolor://font de même pour la barre de navigation Android. Voir l'API Dynamic UI.Ajoutez le CSS, uniquement dans l'app si vous préférez
Placez le CSS de safe area dans votre app web, ou dans le custom.css du projet s'il ne doit s'appliquer que dans l'app. Remplacez
100vhpar100dvhpour les écrans pleine hauteur.Testez toutes les combinaisons
Émulateurs Android 15 et Android 16, chacun une fois avec la navigation par gestes et une fois avec la navigation à trois boutons ; un profil d'appareil avec une encoche ; le paysage, où
HIDE_NAVIGATION_BAR_IN_LANDSCAPEpeut aider ; et un formulaire avec le clavier ouvert. Sur chacun, vérifiez l'en-tête, la barre du bas et le premier et le dernier élément de liste.Importez et revérifiez le tableau de bord
Importez avec un code de version plus élevé. Une recommandation sur des API obsolètes qui pointe vers une bibliothèque peut subsister ; ce qui compte, c'est que rien dans votre interface ne se trouve sous une barre système.
Prompt : rendre votre app web compatible edge-to-edge
Le prompt laisse la mise en page desktop intacte et n'ajoute que les insets.
À coller dans Lovable, Bolt, Cursor ou Claude Code
Mon app web tourne aussi dans des apps natives Android et iOS (WebViewGold). Android 15 et plus récent affichent les apps edge-to-edge, si bien que les éléments fixes peuvent se retrouver sous la barre d'état et la barre de navigation. Mets à jour la mise en page : 1. Ajoute viewport-fit=cover à la balise meta viewport existante et garde ses autres valeurs. 2. Définis des variables CSS pour env(safe-area-inset-top), env(safe-area-inset-bottom), env(safe-area-inset-left) et env(safe-area-inset-right), chacune avec une valeur de repli de 0px. 3. Ajoute l'inset du haut au padding de l'en-tête sticky ou fixe, et l'inset du bas au padding de chaque barre fixe en bas, bouton d'action flottant et bandeau cookies. 4. Ajoute un padding bas équivalent au contenu principal pour que le dernier élément ne soit pas masqué derrière la barre du bas. 5. Remplace 100vh par 100dvh pour les mises en page pleine hauteur. 6. Ne change ni les couleurs, ni les espacements, ni le comportement dans un navigateur desktop normal. Liste chaque fichier et chaque sélecteur que tu as modifié.
Checklist edge-to-edge
- Compilé à partir du modèle WebViewGold actuel, et non d'un ancien projet avec un targetSdk relevé.
- Un seul responsable des insets : le natif (barre d'état opaque) ou le CSS (barre d'état transparente), jamais les deux.
- Icônes de la barre d'état lisibles sur chaque page, en mode clair comme en mode sombre.
- En-tête et barre du bas à l'écart des barres système, avec la navigation par gestes comme avec la navigation à trois boutons.
viewport-fit=coverplus une margeenv(safe-area-inset-*)sur les éléments fixes.- Testé sous Android 15 et 16, en portrait et en paysage, avec le clavier ouvert.
Questions fréquentes
Puis-je encore désactiver l'edge-to-edge sous Android ?
Pas pour un nouvel import. L'attribut de désactivation fonctionnait pour les apps ciblant le niveau d'API 35 ; pour les apps ciblant le niveau d'API 36, il est désactivé sur les appareils Android 16, et Google Play exige désormais le niveau d'API 36 pour les nouvelles apps et les mises à jour.
Pourquoi les icônes de ma barre d'état sont-elles invisibles ?
La barre a la même couleur que les icônes, en général parce qu'elle est transparente au-dessus d'un en-tête clair ou sombre. Réglez blackStatusBarText selon la couleur de votre barre d'état, ou basculez-le page par page avec statusbartextcolor://white ou statusbartextcolor://black.
L'edge-to-edge d'Android affecte-t-il mon app iOS ?
Non, mais iOS a ses propres safe areas. WebViewGold pour iOS les gère par défaut avec autoAdjustSafeAreaInsets, et le CSS de cette page fonctionne dans les deux apps.
La Play Console dit que j'utilise setStatusBarColor, mais je ne l'ai jamais écrit. Pourquoi ?
La recommandation liste les appels trouvés n'importe où dans le bundle, y compris dans des bibliothèques comme les composants Material. C'est une recommandation, pas un refus. Gardez le modèle et ses SDK à jour et assurez-vous que votre interface n'est pas recouverte par les barres système.
La mise en page sur tablette a changé après la mise à jour. Est-ce lié ?
En partie. Pour les apps qui ciblent Android 16, Android ignore les restrictions d'orientation et de redimensionnement sur les grands écrans (plus petite largeur de 600 dp ou plus), si bien qu'un verrouillage en portrait dans TABLET_ORIENTATION peut ne plus s'y appliquer. Assurez-vous que votre app web a une mise en page tablette et paysage utilisable.
Trois façons de mettre votre app dans les stores
Même résultat, charge de travail différente de votre côté. Les trois formules incluent la garantie d'approbation et le support humain 24/7.
Faites-le vous-même
$109 par plateforme, paiement unique
La licence WebViewGold : un projet Xcode ou Android Studio prêt à l'emploi. Collez votre URL, définissez le nom et l'icône, activez les fonctionnalités, compilez et soumettez. Mises à jour gratuites à vie.
Voir les offres sur la page principaleCloud Builder
$349 par licence, extension en paiement unique
Ni Mac, ni Xcode, ni Android Studio : configurez dans le navigateur, nous compilons les deux apps dans le cloud et les transmettons à App Store Connect et à la Play Console.
Comment fonctionne le Cloud Builder Essayer la démo gratuiteFull Service
$698 par plateforme $798
Envoyez-nous votre URL et votre icône. Notre équipe configure, compile et livre votre app sous 72 heures, en marque blanche, projets sources inclus. Les deux plateformes pour $1,158.
Détails du Full Service Propulsé par
Prix Soldes d'hiver valables jusqu'au 31 décembre 2026.