Date de publication : 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 les pages bord à bord. Ce guide explique l'effet de ce changement sur les sites Web et ce que vous pouvez faire en tant que développeur pour l'adopter.
Bars 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, vous trouverez la barre d'état, qui contient des icônes de notification et des icônes système.
En bas de l'écran, vous trouverez la barre de navigation, qui vous permet de contrôler la navigation à l'aide des commandes "Retour", "Accueil" et "Aperçu". Il peut s'agir de la navigation classique à trois boutons ou de la barre de navigation moderne par gestes.
En plus des barres système Android, Chrome est doté d'une barre d'adresse qui s'agrandit et se réduit de manière dynamique lorsque vous faites défiler la page.
Chrome passe au bord à bord
Lorsque vous consultez un site Web, celui-ci s'affiche dans un rectangle appelé fenêtre d'affichage (mise en page).
Dans Chrome sur Android, avant Chrome 135, cette zone d'affichage de mise en page est dessinée entre la barre d'état supérieure et la barre de navigation par gestes inférieure. La présence de la barre d'adresse de Chrome (ou son absence) peut affecter la taille de la fenêtre d'affichage, mais celle-ci ne s'étendra jamais à la barre système supérieure ni à la barre de navigation par gestes inférieure.
À partir de Chrome 135, la fenêtre d'affichage peut s'étendre à la barre de navigation par gestes d'Android. C'est ce qu'on appelle le bord à bord.
Comportement de Chrome sans le mode bord à bord
L'enregistrement suivant montre Chrome sur Android sans prise en charge du mode bord à bord. La barre d'adresse de Chrome (en haut) disparaît de manière dynamique lorsque l'utilisateur fait défiler la page. Toutefois, la barre d'état supérieure native d'Android et la barre de navigation native d'Android en bas restent fixes.
Ici, la taille de la fenêtre d'affichage de la mise en page change à mesure que la barre d'adresse de Chrome se rétracte ou s'agrandit.
Comportement de Chrome avec le mode bord à bord
À partir de Chrome 135, Chrome peut afficher du 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.
Écran bord à bord dynamique avec "menton"
Par défaut, Chrome bord à bord affiche une nouvelle barre inférieure dynamique appelée "le menton" sur la zone de la barre de navigation par gestes. Tout comme la barre d'adresse de Chrome, cette barre inférieure se déplace lorsque vous commencez à faire défiler la page et affecte la taille de la fenêtre d'affichage.
Dans l'enregistrement suivant de Chrome sur Android avec la prise en charge du mode bord à bord, la barre d'adresse et la barre de navigation de Chrome se rétractent de manière dynamique lorsque l'utilisateur fait défiler la page vers le bas. La fenêtre d'affichage s'agrandit, ce qui permet d'afficher le contenu Web jusqu'au bord inférieur de l'appareil.
Ce comportement de la barre inférieure est le nouveau comportement par défaut de Chrome à partir de Chrome 135.
Passer au format bord à bord par défaut avec activation
Les sites Web conçus pour le mode bord à bord peuvent l'indiquer en modifiant la balise Meta viewport. Lorsqu'elle est activée, 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 sans bordure à l'aide de la balise Meta viewport et de sa clé viewport-fit.
Pour activer le mode bord à bord, définissez viewport-fit sur la valeur de cover.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
En savoir plus sur les différentes valeurs de viewport-fit sur MDN
Gérer le contenu susceptible d'être masqué par la barre de navigation par gestes
En mode bord à bord, vous devez tenir compte de tout contenu susceptible d'être masqué par la barre de navigation par gestes.
Dans la plupart des cas, vous n'avez rien à faire, car la barre inférieure se déplace d'elle-même. Les utilisateurs peuvent toujours accéder à l'ensemble du contenu de votre site Web comme avant.
Toutefois, si vous optez pour l'affichage de bord à bord par défaut ou si un élément est 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 par les utilisateurs, mais il est masqué par la barre de navigation d'Android lorsque le menton disparaît.
Pour résoudre ce problème, utilisez les encarts de la zone de sécurité afin de toujours positionner les éléments concernés au-dessus de la barre de navigation par gestes native d'Android, ou pour que leur arrière-plan s'étende dans cette zone.
Marges de la zone de sécurité
Les marges de la zone de sécurité sont quatre variables d'environnement qui définissent un rectangle par ses marges supérieure, droite, inférieure et gauche par rapport au bord de la fenêtre d'affichage.
Ensemble, ces quatre valeurs forment le rectangle de la 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 par gestes d'Android.
Utiliser l'encart inférieur de la zone de sécurité
Pour les éléments situés en bas de la fenêtre d'affichage, utilisez safe-area-inset-bottom comme valeur de 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 à mesure que 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 la barre de navigation est visible, la barre de navigation par gestes d'Android s'affiche au-dessus. Lorsque la barre de navigation disparaît, l'élément se place également au-dessus.Comme vous pouvez le voir dans les illustrations, le résultat n'est pas encore parfait : lorsque le menton est déplacé, le reste du contenu 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 jusqu'à la zone de la barre de navigation par gestes.
Pour éviter que du contenu ne soit affiché sous un contenu ancré en bas, une approche couramment utilisée consiste à définir le padding-bottom sur le safe-area-inset-bottom. De cette façon, l'élément ancré en bas s'agrandit automatiquement à mesure que le menton se masque. Bien que cela fonctionne, cette approche n'est pas recommandée, car elle entraîne un thrashing de mise en page lorsque le menton se déplace.
Ne définissez pas padding sur une valeur safe-area-inset.
.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 de safe-area-max-inset-bottom. Contrairement à la safe-area-inset-bottom dynamique, qui est mise à jour de manière dynamique à mesure que le menton s'écarte, la safe-area-max-inset-bottom représente la valeur maximale de la safe-area-inset-bottom.
Utilisez ce safe-area-max-inset-bottom pour agrandir l'élément ancré en bas à l'avance, et combinez-le avec safe-area-inset-bottom pour tirer l'élément vers le bas 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 qu'avec l'approche padding-bottom: env(safe-area-inset-bottom, 0px);, mais les performances sont bien meilleures. Comme 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 l'affichage bord à bord avant sa sortie publique stable, vous devez activer plusieurs flags de fonctionnalité Chrome via chrome://flags :
EdgeToEdgeBottomChin(si vous le définissez sur "Enabled Debug", la moitié du menton sera colorée en rose pour le distinguer plus clairement des autres éléments de l'UI)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor(ne définissez pas l'option sur "Activé", mais sur "Activé : envoyer yOffset")DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint(ne définissez pas l'option sur "Enabled", mais sur "Enabled Scrollable Variation")
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.