javascript - iOS Safari：对于像弹出菜单这样的覆盖，100vh 无法正常工作，并隐藏在 44px 像素高的 safari 菜单栏下

Question

问题是 iOS Safari 中未正确处理 100vh。它错误地计算到 safari 菜单栏底部的高度 [在底部]，并将弹出菜单渲染到菜单栏的下边缘。这导致菜单被部分隐藏并产生问题，即使用 100vh 为跨设备设计可滚动弹出菜单。 详情在这里| 更多细节在这里

因此，希望找到一个不使用 100vh 的替代解决方案，以便它适用于所有浏览器和平台。

标签： javascripthtmlcsssafaricross-browser

Answer 1

我通过将菜单高度设置为 window['innerHeight'] + 'px' 而不是使用 100vh 解决了这个问题。

然后我随着浏览器大小的变化更新高度[下面的伪代码]

addEventListener('resize', () => menu.style.height = window['innerHeight'] + 'px');

这适用于所有浏览器和移动设备。