iPhone CSS视口问题-网站“摇摆”左右

Question

在iPhone上(而且只有iPhone，而不是安卓)，我们网站的移动版显示得很好，但是当用户试图左右滑动(例如在滑块或图库上)时，整个网站“摇晃”左右，然后回到正确的位置。

换句话说，它不是剪裁或溢出屏幕，它的大小是完美的，但它“排序”滚动左/右，它不应该。

我确信这与容器或视口大小有关，但我不知道如何解决这个问题。

如有任何建议，将不胜感激。

Answer 1

将此元标记添加到标题中

< meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >

还请确保html css包括以下内容

html {
      box-sizing: border-box;
      overflow-x: hidden;    
    overflow-y: visible;
    max-width: 100% ;
    display: flex;
   

}

这样就行了。尝试所有解决方案，通过尝试，您可以看到哪些元素溢出到右侧或左侧。在我的例子中，我有一个20 of的旋转木马填充，在桌面屏幕的边缘，但是手机在左右摇摆。

这将帮助你找出溢出的地方，上面有很好的建议，谢谢你。

* {
    outline: 1px solid red;
}

Answer 2

您需要将overflow-x: hidden;添加到最外层的容器(可能是主体)中：

body {
    overflow-x: hidden;
}

要查看导致溢出的原因，您可以尝试在所有内容周围添加一个大纲，它将允许您轻松地看到是什么在搅乱它：

* {
    outline: 1px solid red;
}

Answer 3

尽管听起来不像身体溢出是问题所在，我仍然会尝试解决它，只是看看会发生什么。我会这样做：

CSS

body {
   overflow-x: hidden;
}

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

希望这能有所帮助！