javascript - iPhone 6 Plus、Safari、iOS8 中的死区。当标签可见时底部区域失去交互性

Question

我正在制作一个网络应用程序，并希望使用所有屏幕并尽可能避免滚动。页面的很多区域都会有需要点击的按钮。

当标签栏打开并且我旋转到纵向并返回到横向时，移动 safari 底部的区域不可点击。

我已将 body 高度设置为与 window.innerHeight 相同，而不是 100%，这样我就不必滚动到底部的按钮。

bodyEl.style.height = window.innerHeight + 'px';

这个区域可能无法用于互动内容。

这是一个带有代码的演示:

http://plnkr.co/edit/327sUQ?p=preview

您应该能够在 iPhone 6 Plus 上通过单击全屏按钮“在单独的窗口中启动预览”来打开它的预览。

更新:

它看起来确实像是 iOS8 中的错误，它在我的模拟器中按预期在 iOS8.4、9.0 和 10.2 中运行。

Answer 1

我可能已经找到了您问题的答案，但很想听听您能否确认。将页面内容设置为具有以下样式:

• overflow-y: scroll(允许您在视口(viewport)下方滚动，但仅在必要时根据内容的长度滚动；默认值为可见)<
• -webkit-overflow-scrolling: touch(平滑任何滚动行为)

除了您的height: 100%(强制内容填充视口(viewport))

似乎强制 Safari 中的 iOS 菜单(顶部的选项卡和地址栏以及底部的导航栏)始终显示。这样一来，点击页面顶部和底部的按钮就不再是“盲区”，而是可以正常工作，而不是打开 Safari 菜单。