如何让Android上的CSS在缩放时像在桌面上一样浮动回流？

问题描述 投票：0回答：2

我有一个 

div
，其中包含一堆其他 
div
和 
float: left
。

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

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

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

<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>
android html css mobile-website
2个回答
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

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

0
投票

以下代码解决了尺寸问题：

window.visualViewport.addEventListener('resize', () => {
  document.getElementById('main').style.width = window.visualViewport.width-16+'px';
});


16
占浏览器默认值
body { margin: 8px; }
，由于某种原因无法从
document.body.style.margin
读取。

仍然存在一个小问题：用户必须手动滚动到左侧。为了解决这个问题，我尝试了

scrollTo()
，
scrollLeft
，
html, body { max-width: 100%; overflow-x: hidden; }
，但没有成功。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.