Publié le : 28 février 2025
L'affichage bord à bord est une fonctionnalité Android qui permet aux applications de s'étendre sur toute la largeur et la hauteur de l'écran en s'affichant derrière les barres système Android.
Avant Chrome 135, Chrome sur Android n'affichait pas le contenu bord à bord. Ce guide explique l'impact de ce changement sur les sites Web et ce que vous pouvez faire en tant que développeur pour l'adopter.
Barres partout
Android est fourni avec des barres système fournies par le système d'exploitation lui-même.
La barre d'état, la barre de légende et la barre de navigation sont appelées barres système. Elles affichent des informations importantes telles que le niveau de batterie, l'heure et les alertes de notification, et permettent d'interagir directement avec l'appareil où que vous soyez.
En haut de l'écran se trouve la barre d'état, qui contient des icônes de notification et des icônes système.
En bas de l'écran se trouve la barre de navigation, qui vous permet de contrôler la navigation à l'aide des commandes "Retour", "Accueil" et "Récents". Il peut s'agir de la barre de navigation classique à trois boutons ou de la barre de navigation moderne par gestes.
En plus des barres système Android, Chrome est fourni avec une barre d'adresse qui se développe et se rétracte de manière dynamique lorsque vous faites défiler la page.
Chrome passe au bord à bord
Lorsque vous consultez un site Web, il s'affiche dans un rectangle appelé fenêtre d'affichage (de mise en page).
Dans Chrome sur Android, avant Chrome 135, cette fenêtre d'affichage de la mise en page est dessinée entre la barre d'état supérieure et la barre de navigation gestuelle inférieure. La présence (ou l'absence) de la barre d'adresse de Chrome peut affecter la taille de la fenêtre d'affichage, mais celle-ci ne s'étendra jamais dans la barre système supérieure ni dans la barre de navigation par gestes inférieure.
À partir de Chrome 135, la fenêtre d'affichage peut s'étendre dans la barre de navigation par gestes d'Android. C'est ce qu'on appelle le bord à bord.
Comportement de Chrome sans bord à bord
L'enregistrement suivant montre Chrome sur Android sans prise en charge bord à bord. La barre d'adresse de Chrome (en haut) se déplace de manière dynamique lorsque la page est défilée. Toutefois, la barre d'état supérieure et la barre de navigation inférieure natives d'Android restent fixes.
Ici, la taille de la fenêtre d'affichage de la mise en page change lorsque la barre d'adresse de Chrome se rétracte ou se développe.
Comportement de Chrome avec le mode bord à bord
À partir de Chrome 135, Chrome peut afficher le contenu Web jusqu'au bord inférieur de l'appareil en étendant la fenêtre d'affichage dans la zone de la barre de navigation par gestes.
Bord à bord dynamique avec "le menton"
Par défaut, Chrome bord à bord affiche une nouvelle barre inférieure dynamique appelée "menton" au-dessus de la zone de la barre de navigation par gestes. Comme la barre d'adresse Chrome, cette barre disparaît lorsque vous commencez à faire défiler l'écran et affecte la taille de la fenêtre d'affichage.
Dans l'enregistrement suivant de Chrome sur Android avec la prise en charge bord à bord, la barre d'adresse et la bande inférieure de Chrome se rétractent de manière dynamique lorsque la page défile vers le bas. Cela entraîne l'expansion de la fenêtre d'affichage, ce qui permet au contenu Web d'être dessiné jusqu'au bord inférieur de l'appareil.
Ce comportement de menton est le nouveau comportement Chrome par défaut à partir de Chrome 135.
Passer au mode bord à bord par défaut avec une option d'activation
Les sites Web conçus pour le mode bord à bord peuvent l'indiquer en modifiant la balise Meta viewport. Lorsqu'il est activé, la fenêtre d'affichage s'étend par défaut jusqu'au bord inférieur sans que le menton ne soit jamais visible.
Une page peut indiquer qu'elle est compatible avec le mode bord à bord à l'aide de la balise Meta viewport et de sa clé viewport-fit.
Pour activer l'affichage bord à bord, définissez viewport-fit sur la valeur cover.
<meta name="viewport" content="width=device-width, initial-scale=1, viewpo>rt-fit=cover" /
En savoir plus sur les différentes valeurs de viewport-fit sur MDN
Gérer le contenu qui pourrait être masqué par la barre de navigation par gestes
En mode bord à bord, vous devez tenir compte de tout contenu qui pourrait être masqué par la barre de navigation par gestes.
Dans la plupart des cas, vous n'avez rien à faire, car la bande inférieure se déplace d'elle-même. Les utilisateurs peuvent toujours accéder à tous les contenus de votre site Web comme avant.
Toutefois, si vous choisissez d'activer le mode bord à bord par défaut ou si vous avez un élément positionné en bas de la fenêtre d'affichage, vous devrez peut-être tenir compte du fait que ce contenu peut être masqué.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
Lorsque le menton est présent, le contenu est initialement accessible aux utilisateurs, mais il est obstrué par la barre de navigation d'Android à mesure que le menton disparaît.
Pour atténuer ce problème, utilisez les encarts de la zone sûre afin de toujours positionner les éléments concernés au-dessus de la barre de navigation par gestes native d'Android, ou de faire en sorte que leur arrière-plan s'étende dans cette zone.
Encarts de la zone de sécurité
Les encarts de zone sécurisée sont quatre variables d'environnement qui définissent un rectangle par ses encarts supérieur, droit, inférieur et gauche à partir du bord de la fenêtre d'affichage.
Ces quatre valeurs combinées forment le rectangle de zone de sécurité dans lequel il est possible de placer du contenu sans qu'il soit obstrué par des éléments tels que la barre de navigation gestuelle Android.
Utiliser l'encart inférieur de la zone de sécurité
Pour les éléments positionnés en bas de la fenêtre d'affichage, utilisez safe-area-inset-bottom comme valeur pour la propriété bottom afin d'éviter qu'ils ne soient placés sous la barre de navigation par gestes. La valeur renvoyée par safe-area-inset-bottom est mise à jour de manière dynamique lorsque le menton se déplace, ce qui permet aux éléments positionnés en bas de rester au-dessus de la barre de navigation par gestes d'Android.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: env(safe-area-inset-bottom, 0px);
}
bottom. Lorsque le menton est visible, la barre se trouve au-dessus de la barre de navigation par gestes d'Android. Lorsque le menton disparaît, l'élément se trouve également au-dessus.Comme vous pouvez le voir sur les illustrations, le résultat n'est pas encore parfait : lorsque le menton est déplacé, le contenu restant de la page devient visible dans la zone de la barre de navigation par gestes. En effet, dans cet état, la fenêtre d'affichage s'étend dans la zone de la barre de navigation par gestes.
Pour éviter que le contenu ne soit affiché sous le contenu ancré en bas, une approche courante consiste à définir padding-bottom sur safe-area-inset-bottom. De cette façon, l'élément ancré en bas se développe automatiquement lorsque le menton se cache. Bien que cette approche fonctionne, elle n'est pas recommandée, car elle entraîne un layout thrashing lorsque le menton se déplace.
Ne définissez pas padding sur une valeur d'encart de zone sécurisée.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px); /* 🛑 Don't do this, as it causes layout thrashing. */
}
Utiliser l'encart inférieur de la zone de sécurité et l'encart inférieur maximal de la zone de sécurité
L'approche recommandée consiste plutôt à utiliser une combinaison de safe-area-inset-bottom et safe-area-max-inset-bottom. Contrairement à safe-area-inset-bottom dynamique, qui se met à jour dynamiquement lorsque le menton se dégage, safe-area-max-inset-bottom représente la valeur maximale de safe-area-inset-bottom.
Utilisez safe-area-max-inset-bottom pour agrandir l'élément ancré en bas au premier plan, et combinez-le avec safe-area-inset-bottom pour faire descendre l'élément afin qu'il se trouve derrière le menton.
Utilisez safe-area-max-inset-bottom en combinaison avec safe-area-inset-bottom.
:root {
--safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 36px);
--bottom-bar-height: 50px;
}
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
height: var(--bottom-bar-height);
padding-bottom: var(--safe-area-max-inset-bottom);
bottom: calc(env(safe-area-inset-bottom, 0px) - var(--safe-area-max-inset-bottom));
}
body {
padding-bottom: calc(var(--bottom-bar-height) + var(--safe-area-max-inset-bottom));
}
Le résultat visuel est le même que celui de l'approche padding-bottom: env(safe-area-inset-bottom, 0px);, mais les performances sont bien meilleures. Étant donné que seule la valeur calculée pour bottom doit changer lorsque le menton s'éloigne, aucun thrashing de mise en page ne se produit.
Essayer le mode bord à bord avant Chrome 135
Pour essayer le mode bord à bord avant sa version stable publique, vous devez activer plusieurs flags de fonctionnalités Chrome via chrome://flags :
EdgeToEdgeBottomChin(vous pouvez éventuellement définir la valeur sur "Enabled Debug" pour colorer la moitié du menton en rose et le distinguer plus clairement des autres éléments de l'UI)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor(ne définissez pas la valeur sur "Activé", mais sur "Décalage Y activé")DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint(ne définissez pas la valeur sur "Activé", mais sur "Variation avec défilement activé")
Assurez-vous que les options suivantes ne sont pas activées :
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
Redémarrez Chrome deux fois.
Votre avis nous intéresse
Si vous avez des commentaires sur Chrome et son implémentation bord à bord, veuillez nous contacter en signalant un bug Chromium dans le composant "UI > Browser > Mobile > EdgeToEdge". Vos commentaires nous sont très utiles.