Chrome iPad 的视口高度错误

Question

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

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

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

关于此的有趣事实：

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

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

当我切换选项卡并返回时，一切都恢复正常：

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

Answer 1

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

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

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

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

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