Chrome iPad 的视口高度错误

Question

我在 iPad (iPadOS 15.0) 上的 Chrome 浏览器 (v 95.0.4638.50) 上有一个奇怪的行为。

我有第一个网站（我们称之为“A”）和第二个网站（称为“B”）。 A 有一个指向 B 的链接，该链接将在新选项卡中打开。

问题是当 B 在新选项卡中打开时，它看起来比 iPad 的屏幕大，因为我的页脚（position: fixed 和 bottom: 0）在可见部分下方，我必须滚动去看看。

有趣的事实：

• 如果我返回第一个选项卡 (A) 并返回到第二个选项卡 (B)，一切都会恢复正常
• 我用 Safari、Firefox 甚至 Edge 进行了测试，该错误仅出现在 Chrome 中

这是我的页面在首次加载后的显示方式：

然后，如果我滚动一下，我会到达页面底部，我终于看到了页脚：

当我切换标签并返回时，一切都恢复正常：

你知道有什么方法可以告诉 Chrome 正确调整页面大小吗？

Answer 1

选项 1：尝试像这样修改高度

height: calc(100vh - 65px); 65px

或选项 2： 使用 -webkit-fill-available 尝试此选项 2

body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

有a tweet on this