【问题标题】:Mobile site - doesn't scroll at all移动网站 - 根本不滚动
【发布时间】:2011-07-07 15:40:13
【问题描述】:

我到处搜索过 - 我的网站没有固定的高度,也没有固定的展示位置。它显示了我想要的视口,但仅此而已。它不会滚动或显示任何其他内容。

我错过了什么?我已经尝试了各种溢出选项,似乎没有任何效果。

【问题讨论】:

  • 你用什么来制作这个移动网站?您是否尝试使用 JQuery Mobile 之类的东西或类似的东西来做到这一点?
  • 这是我在手机屏幕上的第一次尝试 - 测试站点 @ec2-50-17-62-163.compute-1.amazonaws.com/static/index.html - 享受在手机中输入的乐趣!
  • 任何帮助将不胜感激。谢谢,伙计们。

标签: css mobile scroll viewport


【解决方案1】:

我会做以下...

  1. 我会首先暂时禁用/删除样式表,以确保所有内容都像纯 html 一样漂亮(如果您在没有样式表的情况下仍然存在问题,则可能是 js 脚本破坏了混乱)
  2. 我会在样式表中搜索绝对位置(特别是在包装器、内容或侧边栏元素上)。这通常是 iOS/手机设备上可滚动性的第一杀手。

【讨论】:

  • 谢谢!添加和删​​除以找到罪魁祸首!
【解决方案2】:

BODY 和 HTML 标签的高度是 100%,你的 .wrapper 也是如此

html, body {min-height:100%; height:100%; overflow-x:hidden; display:block;}

尝试从 .wrapper 中删除高度

.wrapper {
    position:relative;
    width:80%;
    margin:0 auto;
}

如果您遇到内容溢出,请将overflow: hidden 添加到 .wrapper

【讨论】:

  • 移除了 wrapper 在屏幕中的 100% 高度和 antiscreen css - 没有变化。
  • 我刚在我的 iPhone 上试过。删除最小高度:100%;高度:100%;也来自html和body,试试看?
  • 不同站点,类似问题。发现删除html, body 上的height: 100% 修复了iPhone 3 上的平滑滚动,也修复了Android 设备(三星)上的滚动。包装纸上没有 100% 的高度。谢谢!
【解决方案3】:

我正在使用由 JavaScript 滑块加载的 iframe 在我的网站上加载 YouTube 视频。这导致 Android 出现问题,不允许滚动和缩放页面。它与设置 CSS“html、body”高度或溢出隐藏无关。一旦我摆脱了 jQuery 滑块插件中的 YouTube 视频,网站滚动和缩放就开始在 Android 手机上正常工作。

【讨论】:

    【解决方案4】:

    尝试删除您的 html 中添加的最后一个 javascript!我发现我的网站在手机上无法滚动,因为 javascript。 最好的问候,

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-11-05
      • 2015-02-28
      • 1970-01-01
      • 2013-01-01
      • 1970-01-01
      • 2023-03-15
      相关资源
      最近更新 更多