如何防止手机浏览器中的地址栏隐藏？

Question

（学习html/css）

我设计了一个非常简单的网页（在一些帮助下），它在视口（屏幕）周围有一个固定的响应边距。问题在于，在移动浏览器中，地址栏将页面向下推，因此底部边距被隐藏。我想防止地址被隐藏，并希望我创建一个完全固定的图像。我已经能够在

上使用此功能锁定缩放

github 存储库：在此处输入链接描述

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

我相信锁定地址栏是可能的，因为Fvckrenderverse已将其锁定在移动设备上，我也想这样做。

我尝试将其添加到但现在的问题是它裁剪了顶部/底部的边距，但地址栏至少被锁定。如何锁定它而不裁剪边距？

  <style type="text/css">
  html, body {margin: 0; height: 100%; overflow: hidden}
</style>

我也尝试过这个脚本，但没有任何改变，地址仍然隐藏在移动设备上。 我试过其他的。

  <script>
function scrollWin() {
  window.scrollTo(0, 0);
}
</script>

看，在顶部/底部，边距已被裁剪，它应该有 20 像素的白色边距，就像侧面一样。在这里，地址栏如我所愿被锁定了。

Answer 1

所以我找到了答案，在reddit上提问。您可以在这里查看解决方案 基本上，您可以像我一样将其添加到标签中，以锁定地址栏：

 <script> function scrollWin() {  window.scrollTo(0, 0);} </script>

然后在您更改的标签中：

来自：

width: calc(100vw - 40px);
height: calc(100vh - 40px);  

...到...

width: calc(100% - 40px);
height: calc(100% - 40px);

（从 vw/vh 更改为 %）

简单回答！

Answer 2

我想出了一个解决方案，但它需要权衡。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: absolute;
  display: flex;
  inset: 0;
  padding: 1px;
  overflow: hidden;
}

/* All content goes inside this element */
.safe-area-view {
  flex-grow: 1;
  overflow: auto;
}

出于某种原因，需要 1px 填充来防止地址栏折叠。