html - iPhone CSS 视口(viewport)问题 - 网站 "wobbles"左/右

Question

在 iPhone(只有 iPhone，不是 Android)上，我们网站的移动版本显示正常，但是当用户尝试向左/向右滑动(例如在 slider 或图库上)时，整个网站“摇晃”左/右，然后回到正确的地方。

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

我确信它与容器或视口(viewport)大小有关，但我自己知道的还不够多。

任何建议将不胜感激。

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;
   

}

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

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

* {
    outline: 1px solid red;
}