在 ios7 safari 上骑在底部和顶部触摸区域 - 风景

Question

我正在开发一个针对 iOS7 优化的网站。我发现，在 Safari 移动设备上将方向更改为横向时，网站会进入全屏状态，但浏览器会阻止视图顶部和底部的一些高度和宽度像素。该区域中的任何触摸或点击事件都不会按照我们的预期进行，但它只是从全屏视图中出来并触发浏览器选项。

1.这是全屏视图的截图，当我点击“什么是推特？”并关闭全屏并显示选项视图（第二张图片）

2.这是我们可以看到的第二张图片，点击“什么是 twitter”我们会看到这个视图

有什么方法可以让我们越过那个水龙头吗？

Answer 1

我想我可能已经找到了答案，但是在纵向和横向之间切换时无法确认。将您的内容设置为具有以下样式：

• height: 100%（允许内容填满视口并超出底部）
• overflow-y: scroll（允许您在视口下方滚动；默认值为visible）
• -webkit-overflow-scrolling: touch（平滑任何滚动行为）

似乎强制 Safari 中的 iOS 菜单始终出现。这样，按钮点击实际上会起作用，而不是打开 Safari 菜单。希望这会有所帮助！

Answer 2

如果我理解您的问题，您的链接位于页面底部。 您必须在页面底部添加一些空间（Safari 图标栏的高度）。 尽管这仅在用户一直向下滚动到底部时才有帮助。

不可点击区域是相对于浏览器视口的，而不是相对于页面高度的。因此，当按钮（或其他东西）位于工具栏出现的区域内时，您无法在第一次尝试时单击它。