在 iOS 上使用 Chrome 重新加载时的视口高度错误

Question

在任何桌面浏览器上一切正常。关于移动浏览器，我在Chrome 上遇到了一个非常奇怪的问题，仅限iOS。

从 URL 栏首次加载网站运行良好，视口高度正确。但是，如果我从历史记录或书签中打开同一个站点，则视口高度是错误的，并且没有考虑到真实的视口。

这是我使用的基本样式 css：

body, html {
  height: 100%;
}

下面是我之前使用的部分代码：

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-width: 320px;
    background: #fff;
}

这是第一次加载的捕获，没有滚动条，高度视口是正确的：

这是从历史记录中第二次加载页面时的捕获，高度不同，页面可滚动：

这是日志，我们可以看到从第一次加载到第二次加载的高度不同：

我不确定我是否遗漏了什么，但我尽可能禁用了我的代码，清除了浏览器的缓存等，但问题仍然存在。它也发生在各种 iPhone 型号上。

2020 年 12 月 20 日编辑

这是一个反应网站上的类似问题：https://www.kirupa.com/react/examples/react_router/index.html#/

如果通过链接打开，视口是正确的。从历史中重新打开这个网站，它会有一个不同的高度，并且会出现一个滚动条。

谢谢！

Answer 1

尝试使用

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

并删除 html 的显示。