Je sais qu'il y a plusieurs questions liées à cela, mais aucune d'entre elles ne semble plus valable puisque l'équipe du navigateur a apporté des modifications depuis que ces questions ont été posées. J'essaie de trouver la dernière solution à ce problème.
Mon souhait est que l'en-tête fixe reste toujours en haut lors de l'utilisation d'un navigateur Web mobile, en particulier lorsque l'utilisateur se concentre sur un champ de saisie et que le clavier virtuel est affiché, pour une expérience semblable à celle d'une application.
Récemment, l'équipe mobile de Chrome a modifié la façon dont la mise en page Web mobile et les fenêtres visuelles sont redimensionnées pour être cohérentes avec Chrome sur iOS et Safari mobile sur iOS.
Ce GIF tiré de l'article de David Fedor illustre très succinctement l'état actuel de la plupart (mais pas de tous) les navigateurs mobiles, à savoir que la fenêtre d'affichage visuelle "monte" lorsqu'un clavier à l'écran (OSK, alias clavier virtuel) s'affiche lorsque le champ a du focus.
Le plus gros problème auquel je suis confronté est que je n'arrive pas à faire en sorte que l'élément de titre reste visuellement au premier plan lorsque OSK est affiché. C'est un gros problème lorsque la barre supérieure de votre application comporte une action principale sous la forme de "Enregistrer". Cela encombre l'expérience utilisateur et rend les clients frustrés, ce n'est donc pas une petite chose à mon avis.
J'ai essayé l'API VisualViewport recommandée par l'équipe Chrome, référencée env(keyboard-inset-height) , mais cela ne semble pas fonctionner, ce qui me fait penser que je fais quelque chose de bizarre avec la mise en page, comme ENV qui n'est pas défini correctement.
Rien de trop fou, utilisez CSS Grid pour contrôler la mise en page.
HTML
<html>
<body>
<div id="container">
<header id="header">header</header>
<main id="main">
main
<input type="text" />
</main>
<footer id="footer">footer</footer>
</div>
</body>
</html>
Styles CSS
body {
margin: 0;
}
#container {
height: 100dvh;
display: grid;
grid-template:
"header" 50px
"main" 1fr
"footer" 50px
"keyboard" env(keyboard-inset-height, 0px); // does not seem to work?
}
#header {
grid-area: header;
}
#main {
grid-area: main;
overflow-y: scroll;
}
#footer {
grid-area: footer;
}
Ce que j'ai obtenu, ce sont les deux captures d'écran suivantes, la première pleine page est la mise en page que je veux et la seconde est que lorsque vous concentrez le curseur sur l'entrée près du bas, cela "pousse" toute la fenêtre visuelle vers le haut, ce qui fait que le titre est situé hors de l'écran.
| Plein écran | Centré sur la saisie |
|---|---|
Existe-t-il actuellement un moyen de garantir que le titre reste toujours en haut de la fenêtre d'affichage visuelle ? Après la récente mise à jour de Chrome, je ne trouve actuellement pas de solution fonctionnelle.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pour Google Chrome 108 ou supérieur, définissez
<meta name="viewport" content="width=device-width, initial-scale=1.0, Interactive-widget=resizes-content">.Notez l'attribut
viewport元标记中的interactive-widget.J'ai trouvé la solution ici.
J'ai vérifié la dernière version de Chrome pour Android.
body { margin: 0; } #container { height: 100dvh; display: grid; grid-template: "header" 50px "main" 1fr "footer" 50px ; } #header { grid-area: header; } #main { grid-area: main; overflow-y: scroll; } #footer { grid-area: footer; }