ios - iOS 上的水平滚动——关闭 Canvas 导航菜单

Question

将我的站点推送到开发服务器后，我在 iOS 上看到水平滚动(我在本地开发时没有看到)。我使用的是非 Canvas 导航菜单，它为页面提供了额外的宽度。 Here is the site .

非常感谢任何帮助。感谢您的宝贵时间!

Answer 1

我在 Desktop Safari 中检查了您的网站，发现了同样的问题。

问题似乎是网站布局仍然认为它更宽。起初我确信 overflow-x:hidden 和 width:100% 的简单应用可以达到目的。

但是——

1. 你似乎已经做到了。
2. 它没有。

我发现很难筛选 CSS，因为你有很多事情要做，我认为 CSS3 转换可能是造成这个问题的原因，但我能够在 Desktop Safari 中查看时锁定它，同时inspecting Mobile Safari directly具有以下内容:

• 将 position:fixed 应用到您的主导航，而不是 position:absolute。 Desktop Safari 对此很满意。
• 删除您的 .site-content::before 伪元素。这仍然是导致 Mobile Safari 出现问题的原因。 删除到 translate3d(100%,0,0) 的 CSS 转换也有帮助。

旁注:您还可以考虑简化 HTML 和/或 CSS 的方法。你有 1.1MB 加载，没有任何真实图像；对于移动用户来说，带宽是一笔实实在在的成本。我知道那可以是 PITA 但值得一提。祝你好运!