css - Chrome 地址栏导致我的移动网页滚动

我正在使用 NuxtJS 创建一个移动优先的 webapp。预期的行为是拥有一个无需滚动即可占据整个屏幕的页面。它在开发中运行良好，但是当我在真实设备上试用它时，Chrome 地址栏会引起一点滚动。

我已经看到这种添加height: 100%到htmlandbody标签的建议。

即使这样，当显示地址栏时，我的显示器似乎还是溢出了页面。

我怎样才能在不隐藏地址栏的情况下解决这个问题（似乎是一个 hacky 解决方案，最好使用 CSS）？

html,
body,
#__nuxt,
#__layout {
  height: 100%;
}

标签： cssnuxt.js

这种问题是众所周知的，确实很烦人。
在网络上有很多可能的黑客攻击，一个新的单元，比如vh但没有地址栏的问题正在开发中。

与此同时，最好的解决方案是尝试这样的事情

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}