En novembre, avec la sortie de Chrome 108, Chrome modifiera le comportement de la fenêtre d'affichage de mise en page lorsque le clavier à l'écran (OSK) s'affiche. Avec cette modification, Chrome sur Android ne redimensionnera plus la fenêtre d'affichage de la mise en page, mais uniquement la fenêtre d'affichage. Le comportement de Chrome sur Android sera ainsi semblable à celui de Chrome sur iOS et de Safari sur iOS.
Voici quelques informations générales sur la situation, les raisons de ce changement et ce que vous pouvez faire pour vous y préparer.
Fenêtres d'affichage de mise en page et de vue visuelle
Lorsque vous consultez un site Web, vous n'avez pas la possibilité de voir l'intégralité du contenu de la page après son chargement. Au lieu de cela, le navigateur propose une fenêtre d'affichage à travers laquelle vous pouvez voir une partie de la page. Cette fenêtre est également appelée fenêtre d'affichage de la mise en page. Lorsque le contenu d'une page devient trop volumineux, le navigateur propose un mécanisme de défilement.
Lorsque vous positionnez des éléments à l'aide de position: fixed, ils sont disposés par rapport à cette fenêtre d'affichage de mise en page. Comme la fenêtre d'affichage de la mise en page reste en place lorsque vous faites défiler une page, il en va de même pour les éléments qui utilisent position: fixed.
position: fixed (boîtes bleues). Voici les images (de gauche à droite) Safari sur iPhone, Chrome sur Android et Firefox sur Android.
En plus de cette fenêtre d'affichage de mise en page, le navigateur propose une fenêtre d'affichage. Il représente la partie de la fenêtre d'affichage qui est actuellement visible. Au niveau de zoom 1, cette fenêtre d'affichage visuelle est aussi grande que la fenêtre de mise en page.
Lorsque vous faites un zoom avant par pincement, vous réduisez la taille de la fenêtre d'affichage par rapport à celle de la mise en page.
Comportement du redimensionnement de la fenêtre d'affichage
Lorsque vous sélectionnez une entrée ou toute autre zone modifiable, les appareils (surtout des écrans tactiles) peuvent afficher un clavier à l'écran. Ce clavier, souvent appelé clavier virtuel,permet aux utilisateurs de saisir du contenu dans la zone modifiable.
Les navigateurs réagissent alors de l'une des manières suivantes en fonction des différentes fenêtres d'affichage:
- Ne redimensionnez que la fenêtre d'affichage visuelle et décalez la fenêtre de mise en page.
- Redimensionnez la fenêtre d'affichage visuelle et la fenêtre de mise en page.
- Ne redimensionnez pas la fenêtre d'affichage de mise en page ou la fenêtre d'affichage, car vous superposez le clavier virtuel au-dessus des deux.
Ces trois comportements sont représentés comme suit:
Selon la combinaison de navigateur et de système d'exploitation utilisée par un visiteur, l'un des comportements est utilisé sans votre contrôle.
Mapper les différents comportements de redimensionnement
Dans la partie Effort d'investigation des fenêtres d'affichage d'Interop 2022, plusieurs aspects liés aux fenêtres d'affichage ont été étudiés, pour chaque combinaison majeure de navigateur et d'OS.
L'un des aspects testés est le comportement de redimensionnement lorsque l'OSK est affiché. Cela a conduit à la classification suivante:
Groupe 1
Navigateurs qui redimensionnent la fenêtre d'affichage visuelle, sans modifier la fenêtre d'affichage de mise en page.
- Safari sur iOS
- Safari sur iPadOS
- Chrome sur ChromeOS
- Chrome sur iOS
- Chrome sur iPadOS
- Edge sur iOS
- Edge sur iPadOS
Groupe 2
Navigateurs qui redimensionnent à la fois la fenêtre d'affichage visuelle et la fenêtre de mise en page.
- Chrome pour Android
- Firefox sur Android
- Edge sur Android
- Firefox sur iOS
Groupe 3
Navigateurs qui ne redimensionnent aucune des fenêtres d'affichage:
- Aucune par défaut : dans Chrome sur Android, vous pouvez activer ce comportement à l'aide de l'API VirtualKeyboard.
Effets secondaires de chaque comportement
Cette différence de redimensionnement des différentes fenêtres d'affichage lors de l'affichage de l'OSK entraîne une mise en page non interopérable et un comportement de dimensionnement des sites Web.
Dans les navigateurs du groupe 1, avec l'OSK affiché:
- Les valeurs calculées pour les unités relatives à la fenêtre d'affichage restent les mêmes.
- Les éléments qui ont été conçus pour occuper tout l’espace visuel conservent leur taille.
- Les éléments qui utilisent
position: fixedrestent en place et peuvent être masqués par l'OSK.
Dans les navigateurs du groupe 2, avec l'OSK affiché:
- Les valeurs calculées pour les unités relatives à la fenêtre d'affichage sont réduites.
- Les éléments qui ont été conçus pour occuper tout l'espace visuel se rétrécissent.
- Les éléments qui utilisent
position: fixedpeuvent se retrouver ailleurs dans la mise en page.
position: fixed (cases bleues). Vous pouvez voir ci-dessous Safari sur iOS (à gauche) et Chrome sur Android (au centre et à droite).
À moins d'avoir recours au reniflage de l'user-agent ou à l'utilisation d'un script intensif, vous ne pouvez pas savoir quel comportement est utilisé. Vous ne pouvez pas non plus modifier ce comportement, car celui-ci est déterminé par la combinaison du navigateur et du système d'exploitation de l'internaute.
Modifier le comportement par défaut dans Chrome 108
À partir de Chrome 108, Chrome sur Android ajustera son comportement de redimensionnement de la fenêtre d'affichage pour ne plus redimensionner la fenêtre d'affichage de mise en page lorsque le clavier à l'écran est affiché.
Le comportement de Chrome sur Android sera ainsi aligné sur celui de Chrome sur iOS, iPadOS, Windows et CrOS, Safari sur iOS et iPadOS, et Edge sur iOS, iPadOS et Windows.
Grâce à cette modification, les auteurs peuvent savoir quel comportement sera utilisé, quel que soit le système d'exploitation sur lequel Chrome est exécuté. De plus, il permet des unités stables par rapport à la fenêtre d'affichage: l'affichage ou le masquage de l'OSK n'a aucune incidence sur ces unités.
Activation d'un autre comportement
Si vous souhaitez que votre site Web utilise le comportement de redimensionnement antérieur à la version 108, n'ayez crainte. Dans Chrome 108, une extension de la balise Meta de la fenêtre d'affichage est également disponible.
La touche interactive-widget vous permet d'indiquer à Chrome le redimensionnement souhaité.
Valeurs acceptées pour interactive-widget:
resizes-visual: redimensionnez uniquement la fenêtre d'affichage visuelle, mais pas la fenêtre de mise en page.resizes-content: redimensionnez la fenêtre d'affichage visuelle et la fenêtre de mise en page.overlays-content: ne redimensionne aucune fenêtre d'affichage.
Pour réactiver l'"ancien" comportement de Chrome sur Android, définissez la balise Meta de la fenêtre d'affichage comme suit:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Si vous n'incluez pas interactive-widget dans la balise Meta de la fenêtre d'affichage, Chrome utilisera le comportement par défaut, à savoir resizes-visual.
Visualisés, les paramètres ont cet effet sur les différentes fenêtres d'affichage:
resizes-visual, resizes-content et overlays-content.
Vous pouvez tester l'effet de chaque valeur dans votre navigateur sur ce site Web de démonstration.
Tests et commentaires
Nous nous attendons à quelques différences mineures par rapport aux sites existants, mais sachez qu'ils ne seront pas bloquants, car Chrome 108 sur Android se comportera désormais de la même manière que Safari sur iOS. Par conséquent, les sites Web qui fonctionnent correctement dans Safari sur iOS devraient également fonctionner correctement avec Chrome 108 sur Android.
Toutefois, nous encourageons les auteurs de sites Web à les tester activement dans Chrome 108, en version bêta depuis le 27 octobre 2022. Repérez en particulier les éléments qui utilisent position: fixed et/ou des unités relatives à la fenêtre d'affichage.
Vous pouvez nous signaler vos commentaires sur le site crbug.com. Veillez à inclure "clavier à l'écran" dans le titre du rapport.