移动端如何像桌面浏览器一样进行缩放？

Question

我有一个页面，它使用css的百分比单位实现动态流布局。在桌面上，如果我调整页面大小，页面看起来很漂亮，文字重新排列，使页面变长以适应大小变化。在桌面上，如果我缩放页面，页面看起来很漂亮，一切都会变大并重新排列，使页面变长以适应大小变化。

在移动设备上，当我缩放页面时，页面保持相同的宽高比，整个页面变大，没有重新排列，使用起来不方便。

如何让移动设备上的缩放像桌面上那样重新排列？

编辑：

---

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

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

这告诉移动设备最初应该流到“实际”宽度。 这是一个非常好的开始。 客户对“移动站点”非常满意。 但是，它仍然像移动设备一样缩放：页面保持相同的长宽比，整个页面变大，没有重新排版。 因此，我仍在寻找答案。

- Jacob

---

你喜欢使用媒体查询的解决方案，还是不想使用它们？ - RoyalleBlue

我在网页的其他部分中使用了它们，所以如果它们有帮助的话，我不反对在这里使用它们。 - Jacob

根据您需要为媒体指定多少CSS选择器，您可以考虑仅针对手机使用max-width查询。典型的手机屏幕宽度小于480像素。在这种情况下，我建议在底部放置一个链接，允许用户在“桌面CSS”和“移动CSS”之间切换。这就是我所知道的，希望能帮助您更接近您想要的结果。 - RoyalleBlue

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - G3ck

Answer 1

使用响应式元标记，您可以实现此功能。

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

- Karthi Keyan