iPhone CSS视口问题 - 网站＆＃34;摆动＆＃34;左右

Question

在iPhone上（只有iPhone，而不是Android），我们网站的移动版本显示正常，但当用户尝试向左/向右滑动（例如在滑块或图库上）时，整个网站都会显示＃34 ;摆动＆＃34;左/右，然后回到正确的位置。

换句话说，它没有剪裁或溢出屏幕，它的尺寸完美，但它排序＆＃34; sorta＆＃34;向左/向右滚动，不应该。

我确定它与容器或视口大小有关，但我不太了解自己解决问题。

任何建议都将受到赞赏。

Answer 1

您需要将overflow-x: hidden;添加到最外面的容器中，可能是正文：

body {
    overflow-x: hidden;
}

要查看导致溢出的原因，您可以尝试在所有内容周围添加一个轮廓，这样您就可以轻松查看搞乱内容的内容：

* {
    outline: 1px solid red;
}

Answer 2

即使它听起来不像身体溢出是问题，我仍然会尝试解决它只是为了看看会发生什么。我会做这样的事情：

CSS

body {
   overflow-x: hidden;
}

至少这可以帮助您诊断问题，即使它不起作用。

希望这有帮助！