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;
}

有一条关于此的推文

Answer 2

在我看来，这是Chrome的bug。 但我试图用这种方式解决这个问题。 首先，您需要创建一个输入元素并将其设置为隐藏，如下所示（我使用 tailwindcss）：

<div class="fixed top-0 left-0 p-4 bg-gray-50 z-[-1] flex flex-col gap-4">
  <input type="text" id="test" />
</div>

之后，为文档添加一个事件监听器并像这样处理它

const handleFirstTouch = () => {
  let test = document.getElementById('test');
  test.focus();
  setTimeout(() => {
    test.blur();
    document.removeEventListener('touchstart', handleFirstTouch);
  }, 0);
}

document.addEventListener('touchstart', handleFirstTouch);

希望可以帮到你！