Chrome 移动网络中的布局/视觉视口更改后如何将标题保持在视觉视口顶部？

Question

我知道有很多关于此的问题，但由于浏览器团队自提出这些问题以来已经做出了更改，因此这些问题似乎都不再有效。我正在尝试找到此问题的最新解决方案。

目标

我的愿望是在使用移动网络浏览器时，特别是当用户将焦点放在输入字段上并且显示虚拟键盘时，让固定标题保持静止在顶部，以获得类似应用程序的体验。

背景语境

最近，Chrome 移动团队更改了调整移动网络布局和视觉视口大小的方式，以便与 iOS 上的 Chrome 和 iOS 上的移动 Safari 保持一致。

此 GIF 来自 David Fedor 的文章，非常简洁地演示了大多数（但不是全部）移动浏览器的当前状态，即当屏幕键盘（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 更新后，我目前找不到有效的解决方案。

Answer 1

对于 Google Chrome 108 或更高版本，请设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

。
注意

interactive-widget

 元标记中的

viewport 属性。

我找到了解决方案这里。
检查了 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;
}

<!DOCTYPE html>
<html>
<head>
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
</head>
<body>
<div id="container">
  <header id="header">header</header>
  <main id="main">
    main 2<br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" /><br>
  </main>
  <footer id="footer">footer</footer>
</div>
</body>
</html>

Chrome 移动网络中的布局/视觉视口更改后如何将标题保持在视觉视口顶部？

问题描述投票：0回答：1

目标

背景语境

我的代码

1个回答

最新问题

Chrome 移动网络中的布局/视觉视口更改后如何将标题保持在视觉视口顶部？

问题描述 投票：0回答：1

目标

背景语境

我的代码

1个回答

最新问题

问题描述投票：0回答：1