在移动设备上像桌面浏览器一样缩放

Question

我有一个页面，它使用 css % 单位动态流动。在桌面上，如果我调整页面大小看起来很漂亮，文本会重排，使页面更长以适应。在桌面上，如果我缩放页面，页面看起来很漂亮，所有内容都会变得更大，并且会重排，从而使页面更长以适应。

在移动设备上，当我缩放页面时，页面保持相同的宽高比，整个页面变得更大，没有回流，它变成了一个可以使用的窗格。

如何让移动设备上的缩放像在桌面上一样重排？

编辑：

---

阅读 RoyalleBlue 评论中的链接后，我添加了以下标签：

<meta name="viewport" content="width=device-width">

这告诉移动设备最初流向“实际”宽度。这是一个非常好的开始。客户对“移动网站”感到满意就足够了。但是，它仍然像移动设备一样缩放：页面保持相同的宽高比，整个内容变得更大并且没有回流。所以我仍在寻找答案。

Answer 1

使用响应式元标签，您可以做到这一点

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

Answer 2

监听视口大小调整并调整 div 大小：

window.visualViewport.addEventListener('resize', () => {
  document.getElementById('box').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; }

，但无济于事。