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

Question

将我的网站推送到开发服务器后，我在iOS上看到水平滚动（在本地开发时我没有看到）。我使用的画布导航菜单为页面提供了额外的宽度。 Here is the site。

任何帮助，非常感谢。谢谢你的时间！

Answer 1

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

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

However-

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

我发现很难通过CSS筛选，因为你有很多事情，我认为这是可能的是，CSS3转换正在促进这个问题，但我可以将其锁定在观看在台式机Safari和而inspecting Mobile Safari directly有以下几点：

• 应用position:fixed到您的主导航，而不是position:absolute。桌面Safari对此感到满意。
• 删除您的.site-content::before伪元素。这仍然导致移动Safari的问题。 删除将CSS转换为translate3d（100％，0,0）也有所帮助。

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