iOS上的水平滚动 - 关闭画布导航菜单

Question

将我的网站推送到开发服务器后，我看到iOS上的水平滚动（我在本地开发时没有看到）。我正在使用离开画布的导航菜单，它为页面提供了额外的宽度。 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上的问题。 删除 CSS转换为translate3d（100％，0,0）也有帮助。

附注：您可能还会考虑简化HTML和/或CSS的方法。你有1.1MB的加载没有任何真实的图像;对于移动用户来说，带宽是一个真正的成本。我知道这可能是一个PITA，但值得一提。祝你好运！