安卓默认浏览器无法滚动网页

Question

我在制作一个网页时，遇到了使用原生Android浏览器的问题。简单来说，页面无法垂直滚动，除非先进行缩放。我以为解决方法是发现标签报告的高度比浏览器窗口小，但修复这个问题并没有解决滚动问题。（首页上的黑色框报告了元素的计算高度。）

我的测试设备是运行Android 2.3的Droid Incredible。在Firefox for Android以及我的Android 4.0平板电脑和所有iOS设备中，滚动都可以正常工作。

我的网站开发版本在此处：www.adamjdesigns.info/csu/engage 编辑 - 我尝试过的其他代码：

1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
2. if(navigator.userAgent.match(/Android 2/) && $(window).height() < 600) { $('html').css({'height':$(window).height(),'overflow':'auto'}); }

非常感谢您的帮助！

- AdamJ

---

这不是一个答案，但我曾经在2.3上使用原生基于webkit的浏览器时遇到过这种行为。这是一个常见的情况，所以我猜这是一个在HC版本中修复的错误。只是说一下... - Simon

谢谢，西蒙。至少现在我知道问题不一定是我的编码引起的了。不幸的是，这个错误的借口并不能让我摆脱老板的责备！ - AdamJ

你可以购买一台安装了2.3版本的设备，或者刷入自定义ROM，然后浏览15分钟 - 幸运的话，你很快就会找到一个展示该行为的页面 - 如果我没记错的话，具体设备是运行2.3自定义ROM的Advent Vega。值得注意的是，Android SDK文档似乎也会对我产生这种情况。 - Simon

Answer 1

虽然这是一种不正规的方法，但我有另一个解决方案可能会对开发人员有所帮助。我发现，对于默认的Android 2.3.4浏览器，如果将初始页面加载大小从“1”增加到稍微大一点的值，垂直滚动就可以在不必先进行缩放的情况下完成。例如：

<meta name="viewport" content="width=device-width, initial-scale=1.02" />

- Gatsby

---

感觉好像在做非法的事情，非常感谢！这个方法在安卓模拟器和设备上都有效。 - porfiriopartida

很高兴听到这个消息。我可以向您保证，不会有任何法律问题 :) - Gatsby

Answer 2

我明白了！页面里有一个YouTube视频的iframe，我不确定是iframe本身还是播放其中视频相关的脚本，但从DOM中删除它解决了问题。（无论如何，在移动屏幕上，我已将其设置为隐藏。）

感谢大家的帮助！

- AdamJ

---

嗨，我也遇到了同样的问题。在一个HTML页面中，我使用了一个iframe，这个iframe列出了一个类似画廊的结构，并且是响应式设计。它在iPhone上运行良好。但是在我的Google Nexus上滚动不起作用。它可以滚动到一定程度，然后停止滚动。有什么建议吗？ - Ramaraju.d

Answer 3

顺便说一下，我的网页在Android 2.3上无法滚动，我使用了Gatsby的答案并加入了一些条件性Javascript来解决这个问题。这是我的最终代码：

<meta name="viewport" content="width=device-width, initial-scale=1.00"/>
<script type="text/javascript">
    window.onload=function(){
        var ua = navigator.userAgent;
        if(ua.indexOf("Android")>=0){
            var androidversion=parseFloat(ua.slice(ua.indexOf("Android")+8)); 
            if(androidversion<=2.3){
                document.getElementsByName("viewport")[0].setAttribute("content","width=device-width, initial-scale=1.02");
            }
        }
    };
</script>

这个解决方案首先设置了普通的meta viewport标签，适用于大多数设备，然后使用条件javascript来检测Android版本并将meta标签内容更改为“黑客”值（由Gatsby提供），允许在Android <= 2.3上滚动。这可以防止对不需要该hack的设备进行不必要的水平滚动。

- BWDesign

---

我刚遇到了这种情况，这个方法解决了它。我使用jQuery，但是我将它单独放在主JS文件的顶部，它可以正常工作。 - BlekStena

Answer 4

我发现问题出在我在body标签中添加了overflow-x: hidden;。这应该关闭水平滚动条，但在Android中会关闭垂直滚动条。在Android中，我只能水平滚动。可能是Android浏览器的一个bug。我正在使用旧的安卓手机（HTC Thunderbolt）。我检查了我的css文件并删除了所有的overflow-x:hidden，现在我可以再次垂直滚动。

- Robbiegod

Answer 5

针对您的视口尝试这个：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

- Lowkase

---

很好的建议，但我已经在里面添加了。我使用了HTML5 Boilerplate，其中包括了那个。我还尝试手动在< html>上指定'overflow:scroll'，但无济于事。 - AdamJ