移动 Safari 上的水平拖动

Posted 2023-03-31

【中文标题】移动 Safari 上的水平拖动

【英文标题】：horizontal drag on mobile safari

【发布时间】：2012-08-22 16:44:20

【问题描述】：

也许我患有近视，只是看不出哪里出了问题，但我只在移动 safari 中出现了一些奇怪的水平拖动（我在浏览器和我的 android 手机上检查了它，它工作正常。）我想知道是否有人对如何防止这种情况发生有任何见解？该网站的链接是yetisandbox

可能是视口问题？我目前正在使用这个：

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

感谢您的宝贵时间！

【参考方案1】：

我也遇到过。这为我解决了问题：

html, body
    overflow-x: hidden;

【讨论】：

我应该提到这是在我实现了在原始问题中发布的上述元标记之后。这使用户无法缩放，但我仍然有水平拖动。您需要确保没有突出的元素使页面大于 ios 最大宽度尺寸。将所有内容设置为 100% 或更少。希望这会有所帮助。

感谢@jrue 的跟进。我可以向任何遇到此问题的人确认其元素伸出视口，因此检查所有宽度并更正 html 将解决此问题。

【参考方案2】：

.home-trail
  ...
  width: 100%;
  position: absolute;
  ...

.home-intro
  ...
  width: 1170px;
  margin-right: auto;
  margin-left: auto;
  ...

您的 .home-trail 容器具有 100% 的宽度和一个绝对位置。它的父 .home-intro 的宽度可能小于视口宽度，但位置是静态的。因为 100% 不是指 .home-intro 宽度。所以它是 100vw，但由于其父级的 margin-left 加上缺少的 left:0 属性而获得了一个左侧距离。