从初始视口启用“缩小”

Question

这是在我的 Android Chrome 浏览器上处理视口元标记的问题（未在其他浏览器中测试）。

我想要一个可以缩小的网页，而不仅仅是放大。

如果我使用这个：

<meta name="viewport" content="width=device-width, initial-scale=0.5">

我可以缩小到 0.5 的比例（并且 0.5 是“初始”缩放，正如我所期望的那样）

但如果我使用这个：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5">

我无法缩小超过初始比例。

我误解了初始规模的含义吗？

Answer 1

浏览器不会让您缩小超过内容宽度。您无法缩小以查看“超出”内容的内容。

由于您指定了width=device-width，页面将使用您的设备宽度作为布局宽度。例如，假设您有一个 400 像素宽的屏幕。如果不给您的元素一个明确的大小（例如width: 1000px），您的内容将是 400 像素宽。因此，您可以缩小到的最小比例因子是 1 (400px / 400px)。如果添加具有 的元素width: 800px，则内容现在将为 800像素宽，因此最小比例将为 0.5。

所以你需要让你的内容更广泛。要么明确地使您的内容更宽，要么在您的元标记中使用明确的宽度，例如<meta name="viewport" content="width=800, initial-scale=1">.

另外，请注意，如果没有初始缩放，浏览器将加载尽可能缩小的页面。