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

Question

在 iPhone（仅限 iPhone，而非 Android）上，我们网站的移动版本显示正常，但是当用户尝试向左/向右滑动（例如在滑块或图库上）时，整个网站会向左/向右“摆动” ，然后返回到正确的位置。

换句话说，它没有被剪裁或溢出屏幕，它的尺寸完美，但它“有点”向左/向右滚动，它不应该。

我确定它与容器或视口大小有关，但我自己知道的不足以解决问题。

任何意见，将不胜感激。

Answer 1

您需要添加overflow-x: hidden; 到你最外面的容器可能是身体：

body {
    overflow-x: hidden;
}

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

* {
    outline: 1px solid red;
}

Answer 2

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

CSS

body {
   overflow-x: hidden;
}

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

希望这可以帮助！

Answer 3

将此元标记添加到您的标题

< 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;
   

}

这将做到。 尝试了所有解决方案，也通过尝试，您可以看到某些元素向右或向左溢出的位置。 在我的情况下，我在桌面屏幕边缘有一个 20px 的轮播填充，但移动设备左右摇晃..

这将帮助您确定溢出发生的位置，上面的好建议，谢谢您..

* {
    outline: 1px solid red;
}