Ich weiß, dass es dazu mehrere Fragen gibt, aber keine davon scheint mehr gültig zu sein, da das Browser-Team Änderungen vorgenommen hat, seit diese Fragen gestellt wurden. Ich versuche, die neueste Lösung für dieses Problem zu finden.
Mein Wunsch ist es, dass die feste Kopfzeile bei Verwendung eines mobilen Webbrowsers weiterhin oben bleibt, insbesondere wenn der Benutzer sich auf ein Eingabefeld konzentriert und die virtuelle Tastatur angezeigt wird, um ein App-ähnliches Erlebnis zu erzielen.
Kürzlich hat das Chrome-Mobile-Team die Größenänderung des mobilen Weblayouts und der visuellen Ansichtsfenster geändert, um sie an Chrome unter iOS und mobile Safari unter iOS anzupassen.
Dieses GIF aus David Fedors Artikel veranschaulicht sehr prägnant den aktuellen Zustand der meisten (aber nicht aller) mobilen Browser, nämlich dass das visuelle Ansichtsfenster „nach oben wandert“, wenn eine Bildschirmtastatur (OSK, auch virtuelle Tastatur) angezeigt wird, wenn das Feld angezeigt wird hat Fokus.
Das größte Problem, mit dem ich konfrontiert bin, ist, dass ich das Titelelement nicht dazu bringen kann, optisch oben zu bleiben, wenn OSK angezeigt wird. Dies ist eine große Sache, wenn Ihre obere App-Leiste eine Hauptaktion in Form von „Speichern“ hat. Es beeinträchtigt die Benutzererfahrung und führt dazu, dass Kunden frustriert abreisen. Meiner Meinung nach ist das also keine Kleinigkeit.
Ich habe die vom Chrome-Team empfohlene VisualViewport-API ausprobiert, auf die verwiesen wird env(keyboard-inset-height), aber das scheint nicht zu funktionieren, was mich denken lässt, dass ich etwas Seltsames mit dem Layout mache, zum Beispiel, dass ENV nicht richtig eingestellt ist.
Nichts zu Verrücktes, verwenden Sie CSS Grid, um das Layout zu steuern.
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>
CSS-Stile
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;
}
Was ich erhalten habe, waren die folgenden zwei Screenshots, ganzseitig ist eins das Layout, das ich möchte, und der zweite zeigt, wenn man den Cursor auf die Eingabe unten richtet, „schiebt“ das gesamte visuelle Ansichtsfenster nach oben, sodass der Titel außerhalb des Bildschirms liegt.
| Vollbild | Inputzentriert |
|---|---|
Gibt es derzeit eine Möglichkeit sicherzustellen, dass der Titel immer oben im visuellen Ansichtsfenster bleibt? Nach dem letzten Chrome-Update kann ich derzeit keine funktionierende Lösung finden.
对于 Google Chrome 108 或更高版本，设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, Interactive-widget=resizes-content">。注意
viewport元标记中的interactive-widget属性.我找到了解决方案此处。
检查了 Android 版 Chrome 的最新版本。
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; }