我知道有多个与此相关的问题，但由于浏览器团队自提出这些问题以来已经做出了更改，因此这些问题似乎都不再有效。我正在尝试找到此问题的最新解决方案。
我的愿望是在使用移动网络浏览器时，特别是当用户将焦点放在输入字段上并且显示虚拟键盘时，使固定标题保持静止在顶部，以获得类似应用程序的体验。
最近，Chrome 移动团队更改了调整移动网络布局和视觉视口大小的方式，以便与 iOS 上的 Chrome 和 iOS 上的移动 Safari 保持一致。
这个来自 David Fedor 文章的 GIF 非常简洁地展示了大多数（但不是全部）移动浏览器的当前状态，即当屏幕键盘（OSK，又名虚拟键盘）时视觉视口“向上移动”当某个字段获得焦点时显示。
我面临的最大问题是，当显示 OSK 时，我无法让标题元素在视觉上保持在顶部。当您的顶部应用栏具有“保存”等表单的主要操作时，这是一件大事。它使用户体验变得混乱，导致客户沮丧地离开，所以在我看来这并不是一件小事。
我已经尝试了 Chrome 团队推荐的 VisualViewport API，引用了 env(keyboard-inset-height) ，但这似乎不起作用，这让我觉得我在布局上做了一些奇怪的事情，比如ENV 未正确设置。
没什么太疯狂的，使用 CSS 网格来控制布局。
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样式
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;
}
我得到的是以下两张屏幕截图，全页一张是我想要的布局，第二张是当您将光标聚焦到底部附近的输入时，它“推动”整个视觉视口向上，使标题位于屏幕外。
| 全屏 | 以输入为中心 |
|---|---|
当前有什么方法可以确保标题始终保持在视觉视口的顶部吗？在最近的 Chrome 更新后，我目前找不到有效的解决方案。
对于 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; }