Android默认浏览器不滚动网页答案

【问题标题】：Android default browser not scrolling web pageAndroid默认浏览器不滚动网页
【发布时间】：2012-06-12 18:53:18
【问题描述】：

我在正在构建的页面上遇到了与现有 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'}); }

非常感谢任何帮助！

【问题讨论】：

这不是一个答案，但我在 2.3 版本的基于 webkit 的浏览器上看到了这种行为，只是在网上冲浪。这是一个常见的情况，所以我的猜测是这是一个在 HC 之后修复的错误。只是说...
谢谢，西蒙。至少它有助于知道它不一定是我的编码导致问题的原因。不幸的是，错误的借口不会让我摆脱老板的束缚！
你可以给自己买一个 2.3 的设备，也许刷一个自定义的 ROM，然后上网 15 分钟——幸运的是你很快就会找到一个展示这种行为的页面——IIRC，讽刺的是 Android SDK 文档似乎对我这样做..特定设备是运行 2.3 自定义 ROM 的 Advent Vega。

标签： android mobile browser scroll responsive-design

【解决方案1】：

虽然这是一个 hack，但我还有另一个可能对开发人员有所帮助的修复程序。我发现使用现有的 Android 2.3.4 浏览器，如果将初始页面加载大小从“1”增加到稍微增加的大小，则垂直滚动可以正常工作，而无需先捏缩放。例如：

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

【讨论】：

感觉我在做违法的事情，非常感谢！这对我在 android 模拟器和设备上有效。
很高兴听到。我可以向你保证不会有任何法律问题:)

【解决方案2】：

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

谢谢大家的帮助！

【讨论】：

您好，我也面临同样的问题。在我使用 iframe 的 html 页面中，iframe 列出了类似画廊的结构，它是一种响应式设计。它在 iPhone 上运行良好。但滚动不适用于我的 google nexus。它滚动到一定程度并停止滚动。有什么建议吗？

【解决方案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 提供）安卓

【讨论】：

我刚遇到这种情况，这解决了。我使用 jquery，但我将它单独放在主 js 文件的顶部并且它可以工作。

【解决方案4】：

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

【讨论】：

【解决方案5】：

为您的视口试试这个：

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

【讨论】：

好建议，但我已经把它放在那里了。我使用了 HTML5 Boilerplate，其中包括它。我也尝试在<html> 上手动指定overflow:scroll 无济于事。