Question

我的div包含一堆div float: left个<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>。

在桌面Firefox中，当我更改窗口大小或缩放页面时（Ctrl +/-），块会很好地重排。

但是当我在Android上捏缩放相同的页面时，内容将不会重排，其中一些将在视图外部结束，需要滚动才能看到它。

如何让移动浏览器像桌面一样重排块？

{{1}}

Answer 1

不幸的是，这是Android上的已知错误。你应该能够通过简单的javascript来解决这个问题：

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

<body onresize="recalculate();">

但是android的问题是即使文档内部宽度/高度的缩放值没有改变。 http://code.google.com/p/android/issues/detail?id=10775

但也许您可以通过媒体查询和视口元标记找到不同的解决方案？

如何在缩放时在桌面上进行CSS浮动回流？

1 个答案: