How to make CSS float reflow on Android as on desktop when zooming?

I have a div containing a bunch of other div with float: left.

In desktop Firefox, when I change the window size or when I zoom the page (Ctrl +/-), the blocks will reflow nicely.

But when I pinch-zoom the same page on an Android, the content will not reflow and some of it will end outside the view, requiring scrolling to see it.

How can I make the mobile brower reflow the blocks like on the desktop?

<html>
<head>
<style type="text/css">
#box  { }
#item { float: left; }
</style>
</head>
<body>
<div id="box">
    <div id="item">A</div><div id="item">B</div><div id="item">C</div><div id="item">D</div><div id="item">E</div>
    <div id="item">A</div><div id="item">B</div><div id="item">C</div><div id="item">D</div><div id="item">E</div>
    <div id="item">A</div><div id="item">B</div><div id="item">C</div><div id="item">D</div><div id="item">E</div>
    <div id="item">A</div><div id="item">B</div><div id="item">C</div><div id="item">D</div><div id="item">E</div>
    <div id="item">A</div><div id="item">B</div><div id="item">C</div><div id="item">D</div><div id="item">E</div>
    <div id="item">A</div><div id="item">B</div><div id="item">C</div><div id="item">D</div><div id="item">E</div>
    <div id="item">A</div><div id="item">B</div><div id="item">C</div><div id="item">D</div><div id="item">E</div>
    <div id="item">A</div><div id="item">B</div><div id="item">C</div><div id="item">D</div><div id="item">E</div>
    <div id="item">A</div><div id="item">B</div><div id="item">C</div><div id="item">D</div><div id="item">E</div>
    <div id="item">A</div><div id="item">B</div><div id="item">C</div><div id="item">D</div><div id="item">E</div>
    <div id="item">A</div><div id="item">B</div><div id="item">C</div><div id="item">D</div><div id="item">E</div>
</div>
</body>
</html>

Answers


Unfortunately this is known bug on Android. You should have been able to go around this problem with simple javascript:

function recalculate(){
    var el = document.getElementById('box').style;
    el.width = document.body.offsetWidth+"px";
    return true;
}

<body onresize="recalculate();">

But issue with android is that even after zooming value of inner width / height of document does not change. http://code.google.com/p/android/issues/detail?id=10775

But maybe you could find different solution to your problem with media queries and viewport meta tag ?


Need Your Help

Swift iOS - Character animation static when game reset

ios swift animation sprite-kit

I've been building my first game in swift and really enjoying the learning process. I am however confused why my main character cat who is animated to give a running appearance (two images), is only

SQL insert with enums?

java sql hibernate enums

how can I insert SQL value for eg: