iPhone 6 Plus、Safari、iOS8 中的死区。当标签可见时底部区域失去交互性
Deadzone in iPhone 6 Plus, Safari, iOS8. Bottom area loses interactivity when tabs are visible
我正在制作一个网络应用程序并希望使用所有屏幕并尽可能避免滚动。页面的很多区域都会有需要点击的按钮。
移动版 safari 底部的区域在标签栏打开时无法点击，我旋转到纵向并返回到横向。
我已将 body 高度设置为与 window.innerHeight 相同，而不是 100%，这样我就不必滚动到底部的按钮。
bodyEl.style.height = window.innerHeight + 'px';
可能是这个区域不能用于互动内容。
这是一个演示代码：
http://plnkr.co/edit/327sUQ?p=preview
您应该可以在 iPhone 6 Plus 上通过单击全屏按钮 'Launch the preview in a separate window' 打开它的预览。
更新：
它看起来确实像是 iOS8 中的错误，它在我的模拟器中的 iOS8.4、9.0 和 10.2 中按预期工作。
我正在寻找类似问题的解决方案 - 这不是答案，而是尝试解释。
首先 - 目前，我无法确认此行为 - 似乎已在 iOS 8.4 (12H143) 中修复。上次看的不知道是哪个版本。
尽管如此，我尝试解释我发现的内容（直到我们决定不再费心）。
不可点击区域并不总是死区。如果您在单击之前向上滚动，则很有可能使它正常工作。因此，我认为（空的）标准导航栏就在那里（元素的高度和行为是 similar/the 相同），即使在横向模式下它是空的（所有元素都移到了地址栏）。
顺便说一句：
iPhone 6 plus 还有另一个（类似的）问题（尚未修复）。
如果您在网页顶部有一个 position: fixed 元素，在横向模式下，并且只有当打开了两个或更多选项卡（并且选项卡栏可见）时，您才能点击该元素（甚至通过按钮） - 好像整个事情都不存在。
我可能已经找到了您问题的答案，但很想听听您能否确认。将页面内容设置为以下样式：
overflow-y: scroll（允许您滚动到视口下方，但仅在根据内容长度有必要时才可滚动；默认值为 visible）-webkit-overflow-scrolling: touch（平滑任何滚动行为）
除了您的 height: 100%（强制内容填充视口）
似乎强制 Safari 中的 iOS 菜单（顶部的选项卡和地址栏以及底部的导航栏）总是出现。这样一来，点击页面顶部和底部的按钮就不再是 "dead zones"，而是真正起作用，而不是打开 Safari 菜单。
我知道这个问题有点老了，但既然问题仍然存在，我想我应该分享我的经验...
截至目前，该问题尚无解决方案，但有解决方法。 jennz0r 提供的解决方案可能适用于某些人，但我不喜欢菜单栏始终显示的想法。我看到一个网站已经解决了这个问题......好吧，它至少看起来有效。我在他们的 css 或 js.
中没有找到任何内容
那么解决方法是什么？ 由于 "dead zone" 的高度为 44px，他们只是将浮动条的高度设置为 88px :D 用户会本能地点击按钮的 top/center，它几乎总是第一次尝试工作！
另一种解决方法是 简单地使 button/bar 从底部浮动 44px。
"If it's stupid, but it works... it ain't stupid...";)
我正在制作一个网络应用程序并希望使用所有屏幕并尽可能避免滚动。页面的很多区域都会有需要点击的按钮。
移动版 safari 底部的区域在标签栏打开时无法点击，我旋转到纵向并返回到横向。
我已将 body 高度设置为与 window.innerHeight 相同，而不是 100%，这样我就不必滚动到底部的按钮。
bodyEl.style.height = window.innerHeight + 'px';
可能是这个区域不能用于互动内容。
这是一个演示代码：
http://plnkr.co/edit/327sUQ?p=preview
您应该可以在 iPhone 6 Plus 上通过单击全屏按钮 'Launch the preview in a separate window' 打开它的预览。
更新：
它看起来确实像是 iOS8 中的错误，它在我的模拟器中的 iOS8.4、9.0 和 10.2 中按预期工作。
我正在寻找类似问题的解决方案 - 这不是答案，而是尝试解释。
首先 - 目前，我无法确认此行为 - 似乎已在 iOS 8.4 (12H143) 中修复。上次看的不知道是哪个版本。
尽管如此，我尝试解释我发现的内容（直到我们决定不再费心）。 不可点击区域并不总是死区。如果您在单击之前向上滚动，则很有可能使它正常工作。因此，我认为（空的）标准导航栏就在那里（元素的高度和行为是 similar/the 相同），即使在横向模式下它是空的（所有元素都移到了地址栏）。
顺便说一句：
iPhone 6 plus 还有另一个（类似的）问题（尚未修复）。
如果您在网页顶部有一个 position: fixed 元素，在横向模式下，并且只有当打开了两个或更多选项卡（并且选项卡栏可见）时，您才能点击该元素（甚至通过按钮） - 好像整个事情都不存在。
我可能已经找到了您问题的答案，但很想听听您能否确认。将页面内容设置为以下样式：
overflow-y: scroll（允许您滚动到视口下方，但仅在根据内容长度有必要时才可滚动；默认值为visible）-webkit-overflow-scrolling: touch（平滑任何滚动行为）
除了您的 height: 100%（强制内容填充视口）
似乎强制 Safari 中的 iOS 菜单（顶部的选项卡和地址栏以及底部的导航栏）总是出现。这样一来，点击页面顶部和底部的按钮就不再是 "dead zones"，而是真正起作用，而不是打开 Safari 菜单。
我知道这个问题有点老了，但既然问题仍然存在，我想我应该分享我的经验...
截至目前，该问题尚无解决方案，但有解决方法。 jennz0r 提供的解决方案可能适用于某些人，但我不喜欢菜单栏始终显示的想法。我看到一个网站已经解决了这个问题......好吧，它至少看起来有效。我在他们的 css 或 js.
中没有找到任何内容那么解决方法是什么？ 由于 "dead zone" 的高度为 44px，他们只是将浮动条的高度设置为 88px :D 用户会本能地点击按钮的 top/center，它几乎总是第一次尝试工作！
另一种解决方法是 简单地使 button/bar 从底部浮动 44px。
"If it's stupid, but it works... it ain't stupid...";)