html - 与页面底部对齐的按钮与移动版 Safari 的菜单栏冲突

Question

我正在构建一个 Web 门户，它必须在多个平台上都具有功能性和美观性。
其中一个平台是 IOS Safari，这是我遇到的问题。
在我的代码中，我将两个 float 按钮对齐到 div 的底部，宽度和高度均为 100%
一切正常，我的按钮在页面底部的显示与它们应该显示的完全一样。
但是，当我单击按钮时，移动 safari 中的紧凑 View 会切换到完整 View ，并且我的按钮隐藏在底部导航栏后面!

当用户点击屏幕底部 10% 时，safari mobile 显示扩展菜单是否正常？
我怎样才能避免这种情况？

在此 gif 中，您可以看到 IOS 模拟器上的问题:

如您所见，仅当按钮位于 View 下方 10% 时才会出现问题。这只是一个普通按钮，我的代码已经过几位开发人员的三重检查，没有错误。

Answer 1

我想我可能已经找到了答案。将您的内容设置为具有以下样式:

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

似乎强制 Safari 中的 iOS 菜单始终出现。这样一来，点击按钮就可以正常工作，而不是打开 Safari 菜单。希望这对您有所帮助!