【问题标题】:horizontal drag on mobile safari移动 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" />

感谢您的宝贵时间!

【问题讨论】:

    标签: mobile safari drag responsive-design


    【解决方案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 属性而获得了一个左侧距离。

    【讨论】:

      猜你喜欢
      • 2013-03-25
      • 1970-01-01
      • 2012-12-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-06-08
      • 1970-01-01
      相关资源
      最近更新 更多