Guide de migration de Chrome sur Android de bord à bord

Publié le 28 février 2025

L'affichage d'un bord à l'autre est une fonctionnalité Android qui permet aux applications de s'étendre sur toute la largeur et la hauteur de l'écran en dessinant derrière les barres système Android.

Avant Chrome 135, Chrome sur Android ne dessinait pas d'éléments de bout en bout. 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'intégrer.

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 la 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.

Illustration de la partie supérieure d'un appareil Android avec la barre système mise en évidence.
Barre d'état d'Android mise en surbrillance (source).

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 "Vue d'ensemble". Il peut s'agir de la navigation classique à trois boutons ou de la barre de navigation par gestes moderne.

Illustration de la partie inférieure d'un appareil Android avec la barre de navigation par gestes visible.
Barre de navigation par gestes (source).

En plus des barres système Android, Chrome est doté d'une barre d'adresse qui se développe et se rétracte de manière dynamique lorsque vous faites défiler l'écran.

Chrome passe au bord à bord

Lorsque vous consultez un site Web, celui-ci est présenté dans un rectangle appelé vue (mise en page).

Dans Chrome sur Android, avant Chrome 135, ce viewport de mise en page est dessiné entre la barre d'état supérieure et la barre de navigation par gestes 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 elle ne s'étendra jamais dans la barre système supérieure ni dans la barre de navigation par gestes inférieure.

Illustrations d'un appareil Android avec Chrome sur Android qui n'est pas bord à bord. L'illustration de gauche montre Chrome avec la barre d'adresse développée. Entre la barre d'adresse et la barre de navigation par gestes se trouve une zone mise en surbrillance en vert dont la taille est de 100 svh. L'illustration de droite montre Chrome avec la barre d'adresse rétractée. Entre la barre d'état et la barre de navigation par gestes se trouve une zone mise en surbrillance en vert, dont la taille est de 100 lvh. Le viewport lui-même est entouré d'un contour bleu en pointillés.
Taille minimale et maximale de la fenêtre d'affichage dans Chrome sur Android avant Chrome 135. Ces tailles sont appelées "petite fenêtre d'affichage" et "grande fenêtre d'affichage". La fenêtre d'affichage elle-même est entourée d'un contour bleu en pointillés.

À partir de Chrome 135, le viewport est autorisé à s'étendre dans la barre de navigation par gestes d'Android. C'est ce qu'on appelle le bord à bord.

Illustrations du viewport dans Chrome sur Android qui n'est pas bord à bord (à gauche) et dans Chrome sur Android qui est bord à bord (à droite). Chaque visualisation comporte un cadre bleu qui représente un élément dont la hauteur est de 100 vh. Le texte de gauche explique ce qui se passe lorsque la bordure n'est pas de type "bord à bord". Il indique "Le viewport reste coincé entre la barre d'état supérieure et la barre de navigation par gestes inférieure". Le texte de droite explique ce qui se passe lorsque la bordure de Chrome s'étend de bord à bord. Il indique "La fenêtre d'affichage s'étend dans la barre de navigation par gestes".
Grand viewport affiché dans Chrome sur Android qui ne s'étend pas sur toute la largeur et la longueur de l'écran (à gauche) et dans Chrome qui s'étend sur toute la largeur et la longueur de l'écran (à droite). Dans Chrome avec la compatibilité bord à bord, le viewport s'étend dans la zone de la barre de navigation par gestes lorsque les barres d'outils dynamiques de Chrome sont rétractées.

Comportement de Chrome sans bord à bord

L'enregistrement suivant montre Chrome sur Android sans prise en charge de l'affichage bord à bord. La barre d'adresse de Chrome (en haut) se déplace dynamiquement lorsque la page est lue. Toutefois, la barre d'état supérieure native Android et la barre de navigation native Android en bas restent fixes.

Ancien comportement: Chrome sur Android sans prise en charge de l'affichage bord à bord et https://developer.chrome.com/ chargé.

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 se développe.

Comportement de Chrome avec le mode bord à bord

À partir de Chrome 135, Chrome peut dessiner le contenu Web jusqu'au bord inférieur de l'appareil en étendant le viewport dans la zone de la barre de navigation par gestes.

Écran dynamique bord à bord avec "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. Tout comme la barre d'adresse de Chrome, cette partie 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 prise en charge de l'affichage bord à bord, la barre d'adresse et le menton de Chrome se rétractent de manière dynamique lorsque la page défile vers le bas. La vue d'affichage se développe, ce qui permet de dessiner le contenu Web jusqu'au bord inférieur de l'appareil.

Nouveau comportement: Chrome sur Android avec prise en charge de l'affichage bord à bord et https://developer.chrome.com/ chargé. Notez que la barre inférieure glisse hors de la vue lorsque la page défile.

Ce comportement est le nouveau comportement par défaut de Chrome à partir de Chrome 135.

Passer au format bord à bord par défaut avec une option d'activation

Les sites Web conçus pour l'affichage bord à bord peuvent l'indiquer en modifiant la balise méta viewport. Lorsqu'elle est activée, la vue d'affichage s'étend jusqu'au bord inférieur par défaut, sans que le menton ne soit jamais visible.

Nouveau comportement avec l'activation du mode bord à bord: la fenêtre d'affichage s'étend jusqu'au bord inférieur lors du chargement de la page. Il n'y a pas de menton.

Une page peut indiquer qu'elle est compatible avec l'affichage bord à bord à l'aide de la balise Meta viewport et de sa clé viewport-fit.

Pour activer le mode plein écran, définissez viewport-fit sur la valeur cover.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Pour en savoir plus sur les différentes valeurs de viewport-fit, consultez cette page MDN.

Gérer le contenu qui pourrait être masqué par la barre de navigation par gestes

En mode plein écran, vous devez tenir compte de tout contenu qui pourrait être masqué par la barre de navigation par gestes.

Dans la plupart des cas, aucune action de votre part n'est requise, car la partie inférieure du menton se déplace d'elle-même. Les utilisateurs peuvent toujours accéder à l'intégralité du contenu de votre site Web comme avant.

Toutefois, si vous activez l'affichage plein écran par défaut ou si un élément est positionné en bas du viewport, 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, les utilisateurs peuvent initialement accéder au contenu, mais il est masqué par la barre de navigation d'Android lorsque le menton disparaît.

Illustrations d&#39;un appareil Android avec Chrome sur Android qui s&#39;étend de bord à bord. L&#39;illustration de gauche montre Chrome avec le menton visible. Le contenu ancré en bas (en rouge) se trouve juste au-dessus. L&#39;illustration de droite montre Chrome sans le menton. Le contenu ancré en bas se trouve alors contre le bord inférieur de l&#39;appareil. Le texte associé précise que le contenu situé en bas est désormais masqué par la barre de navigation par gestes.
Illustration d'un site Web avec un élément positionné en bas avec "bottom: 0". Lorsque le menton est visible, l'élément positionné en bas se trouve au-dessus de la barre de navigation d'Android. Lorsque la partie inférieure de l'écran s'éloigne, l'élément se positionne derrière la barre de navigation d'Android, qui l'obscurcit partiellement à ce stade.

Pour atténuer ce problème, utilisez les encarts de la zone sûre afin de toujours placer les éléments concernés au-dessus de la barre de navigation par geste inférieure 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é

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 65.
  • Safari: 11.

Source

Les encarts de la zone de sécurité sont quatre variables d'environnement qui définissent un rectangle en fonction de ses encarts supérieur, droit, inférieur et gauche à partir du bord de la fenêtre d'affichage.

Combinées, ces quatre valeurs forment le rectangle de zone sécurisée dans lequel vous pouvez placer du contenu sans risque qu'il ne soit masqué par des éléments tels que la barre de navigation par gestes Android.

Illustration d&#39;un appareil Android avec Chrome en mode plein écran. Le menton est doté d&#39;une vue coulissante. Dans Chrome, le rectangle de la zone de sécurité est affiché en jaune. Son bord inférieur se trouve juste au-dessus de la barre de navigation par gestes. La partie inférieure du viewport est peinte en bleu dans la barre de navigation par gestes. Le texte associé indique que le rectangle de la zone de sécurité est intégré au viewport par safe-area-bottom-inset, ce qui empêche le contenu d&#39;être peint sous la barre de navigation par geste.
Illustration de Chrome en mode plein écran avec le viewport et le rectangle de la zone de sécurité peints en jaune. Étant donné que le menton est rétracté, le retrait inférieur de la zone de sécurité empêche le rectangle de la zone de sécurité de s'étendre dans la barre de navigation par gestes. Par conséquent, le viseur apparaît sous cette barre de navigation par gestes.

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 pour éviter qu'ils ne soient positionné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 situé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);
}
Illustration d&#39;un appareil Android avec Chrome en mode plein écran. Dans la visualisation de gauche, le menton est visible et le contenu ancré en bas se trouve juste au-dessus. Dans la visualisation de droite, le menton n&#39;est pas visible et le contenu ancré en bas est positionné au même endroit que celui de gauche. Le contenu standard est alors visible sous la barre de navigation par gestes.
Illustrations d'un site Web avec un élément en bas qui utilise l'encart de zone de sécurité inférieure avec la propriété 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 de lui.

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 geste. 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 peint sous le 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 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 déplacement de la 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);
}

Utiliser l'encart inférieur de la zone de sécurité et l'encart inférieur maximal de la zone de sécurité

Nous vous recommandons plutôt d'utiliser une combinaison de safe-area-inset-bottom et safe-area-max-inset-bottom. Contrairement à la safe-area-inset-bottom dynamique, qui est mise à jour dynamiquement lorsque le menton se déplace, la safe-area-max-inset-bottom représente la valeur maximale de la safe-area-inset-bottom.

Utilisez cette safe-area-max-inset-bottom pour développer l'élément ancré en bas à l'avant, puis combinez-la avec safe-area-inset-bottom pour tirer l'élément vers le bas afin qu'il se trouve derrière le menton.

Utiliser safe-area-max-inset-bottom 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));
}

Essayer une démonstration en direct

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 à mesure que le menton s'éloigne, aucun forçage de mise en page ne se produit.

Illustration d&#39;un appareil Android avec Chrome en mode plein écran. Dans la visualisation de gauche, le menton est visible et le contenu ancré en bas se trouve juste au-dessus. Dans la visualisation de droite, le menton n&#39;est pas visible et le contenu ancré en bas a pris visuellement de l&#39;espace à l&#39;emplacement où se trouvait le menton à l&#39;origine. Cela permet d&#39;obtenir un bel effet visuel et d&#39;éviter que le contenu de la page ne devienne visible sous la zone de la barre de navigation par gestes.
Illustrations d'un site Web avec un élément ancré en bas qui tient compte des marges intérieures de la zone de sécurité. Lorsque le menton est visible (à gauche), l'élément se trouve au-dessus de celui-ci. Lorsque le menton n'est pas visible, l'élément déborde visuellement sur la barre de navigation par gestes d'Android.

Essayer l'affichage bord à bord avant Chrome 135

Pour essayer le mode plein écran avant sa version stable publique, vous devez activer de nombreux indicateurs de fonctionnalités Chrome via chrome://flags:

  • EdgeToEdgeBottomChin (si vous définissez la valeur sur "Enabled Debug" (Débogage activé), la moitié de la barre de navigation sera colorée en rose pour la distinguer plus clairement des autres UI)
  • DrawCutOutEdgeToEdge
  • BottomBrowserControlsRefactor (ne pas définir sur "Enabled", mais sur "Enabled Dispatch yOffset")
  • DynamicSafeAreaInsets
  • DynamicSafeAreaInsetsOnScroll
  • EdgeToEdgeWebOptIn
  • DrawKeyNativeEdgeToEdge
  • EdgeToEdgeSafeAreaConstraint (ne pas définir sur "Enabled", mais sur "Enabled Scrollable Variation")

Assurez-vous que les indicateurs suivants ne sont pas activés:

  • DrawNativeEdgeToEdge
  • EdgeToEdgeEverywhere

Redémarrez Chrome deux fois.

Votre avis nous intéresse

Si vous avez des commentaires sur Chrome et son implémentation plein écran, veuillez nous contacter en signalant un bug Chromium dans le composant "UI > Browser > Mobile > EdgeToEdge". Vos commentaires nous sont très utiles.