Android default browser not scrolling web page

android mobile browser scroll responsive-design

17,275

Solution 1

Though it's a hack, I have another fix that might help developers. I found that with the stock Android 2.3.4 browser, if one increases the initial page load size up from "1" to a slightly increased size, vertical scrolling works without having to pinch zoom first. For example:

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

Solution 2

I figured it out! There was an iframe for a YouTube video in the page, and I'm not sure if it's the iframe itself or the related scripting to play the video inside it, but removing that from the DOM solved the issue. (I had it set to hidden on mobile screens anyway.)

Thanks for your help, everyone!

Solution 3

FWIW, I was having a similar problem with my webpage not scrolling in Android 2.3. I used Gatsby's answer with some conditional Javascript to fixed the problem. Here is my final code:

<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>

This solution first sets the normal meta viewport tag which works great with most devices, then uses conditional javascript to detect the android version and change the meta tag content to the "hacked" value (provided by Gatsby) that allows for scrolling on Android <= 2.3. This prevents the unnecessary horizontal scrolling for devices that don't need the hack.

Solution 4

What i found to be the problem was I had added overflow-x: hidden; to my body tag. This should turn off the horizontal scroll bar, but instead in Android it turns off the vertical scroller. And in Android, I can scroll horizontally only. Probably a bug in Android browser. I am using old android phones (HTC Thunderbolt). I went through my css file and removed all overflow-x:hidden and now I can scroll vertically again.

Solution 5

Try this for your viewport:

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

View more solutions

17,275

AdamJ

I build websites, I drink beer, I read a lot. Hopefully my "expertise" can help you out!

Updated on September 15, 2022

Comments

AdamJ over 1 year
I'm having an issue with the stock Android browser on a page I'm building. Simply put, the page won't scroll vertically without zooming in first. I thought I had it figured out when I caught that the tag was reporting a smaller height than the browser window, but fixing that did not cure the scrolling issue. (The black box on the index page reports the calculated height of the element.)

My test device is a Droid Incredible running Android 2.3. Scrolling works in Firefox for Android, as well as my Android 4.0 tablet and all iOS devices.

My dev build of the site is here: www.adamjdesigns.info/csu/engage

EDIT - Other code I've tried:
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'}); }
Any help is greatly appreciated!
AdamJ almost 12 years

Good suggestion, but I've already got that in there. I used the HTML5 Boilerplate, which included that. I've also tried manually specifying overflow:scroll on <html> to no avail.
Ramaraju.d over 10 years

Hi i am facing the same problem. In a html page i am using an iframe, the iframe lists a gallery like structure and it is a responsive design. It works good on iphone. But the scroll does not work on my google nexus. It scrolls upto some extent and stops scrolling. Any suggestions?
BlekStena almost 10 years

I just had this situation and this solved it. I use jquery but I placed this on top of the main js file on its own and it works.