移动网站 - 无法滚动

Question

我已经在Google上搜索了很多地方 - 我的网站没有固定的高度和位置。它显示了我想要的视口，但仅限于此。它不滚动也不显示其他内容。

我错过了什么？我尝试了各种溢出选项，但似乎都没有起作用。

- smack

---

你用什么来制作这个移动站点？你是想用类似于JQuery Mobile之类的东西来完成它吗？ - Soatl

这是我第一次尝试屏幕到移动端的测试网站，地址为http://ec2-50-17-62-163.compute-1.amazonaws.com/static/index.html。在手机上输入这个地址吧，享受一下吧！ - smack

Answer 1

我会按如下方式操作...

1. 首先，我会暂时禁用/删除样式表，以确保一切都是纯html(如果您仍然有没有样式表的问题，则可能是某个js脚本正在破坏混乱)。
2. 我会在样式表中搜索position absolute（特别是在wrapper、content或sidebar元素上）。这往往是影响iOS/移动电话设备可滚动性的头号杀手。

- Lime

---

谢谢！添加和删除以找到罪魁祸首！ - smack

Answer 2

和标签的高度均为100％，您的.wrapper也是如此。

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

试着将 .wrapper 中的 height 属性移除

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

如果您遇到内容溢出的情况，请在 .wrapper 中添加 overflow: hidden。

- superjaz1

---

在屏幕中删除包装器的100％高度和反屏幕CSS - 没有变化。 - smack

我刚刚在我的iPhone上尝试了一下。从html和body中也删除min-height:100％; height:100％;，你可以试试吗？ - superjaz1

不同的网站，相似的问题。发现在html，body上删除height: 100％可以解决iPhone 3上的平滑滚动问题，也可以修复Android设备（三星）上的滚动。包装器上没有100％的高度。谢谢！ - Pim Schaaf

Answer 3

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

- Marty McGee

Answer 4

尝试移除在您的HTML中添加的最后一个JavaScript！我发现我的网站在移动设备上无法滚动是因为一个JavaScript。 此致敬礼，

- Giovanny Palacios