Question

我正在构建的网页上遇到Android浏览器的问题。简单地说，如果没有先放大，页面将不会垂直滚动。当我发现标签报告的高度低于浏览器窗口时，我以为我已经弄明白了，但修复它并不能解决滚动问题。（索引页面上的黑框报告元素的计算高度。）

我的测试设备是运行Android 2.3的Droid Incredible。滚动适用于Android版Firefox，以及我的Android 4.0平板电脑和所有iOS设备。

我的网站构建版本位于：www.adamjdesigns.info/csu/engage

编辑 - 我尝试过的其他代码：

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

非常感谢任何帮助！

Answer 1

虽然这是一个黑客，但我有另一个可能有助于开发人员的修复程序。我发现使用Android 2.3.4浏览器，如果将初始页面加载大小从“1”增加到略微增加的大小，垂直滚动就可以在不必先缩放变焦的情况下工作。例如：

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

Answer 2

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

感谢大家的帮助！

Answer 3

FWIW，我的网页遇到类似的问题，而不是在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>

此解决方案首先设置普通元视口标签，该标签适用于大多数设备，然后使用条件javascript检测Android版本并将元标记内容更改为“被黑客”值（由Gatsby提供），允许滚动Android＆lt; = 2.3。这可以防止不需要黑客攻击的设备进行不必要的水平滚动。

Answer 4

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

Answer 5

尝试使用此视口：

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

Android默认浏览器不滚动网页

5 个答案: