什么是初始比例 = 1.0？

Question

我无法找到initial-scale=1.0 和initial-scale=2.0 含义的明确定义。

这两个是什么意思？

我知道initial-scale 与缩放有关，我只是不知道 1-10 的值是什么意思。

来源：https://www.w3.org/TR/css-device-adapt-1/#translate-meta-to-at-viewport

Answer 1

通常的移动响应式网站会在头部包含一个 HTML 元标记，如下所示：

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

在标签内，width 属性控制视口的大小。它可以设置为精确的像素数，例如 width=400 或特殊值 device-width 值，它是 100% 比例的 CSS 像素中的屏幕宽度。 device-width 是响应式网站最常用的宽度，可跨不同屏幕尺寸进行缩放。

第一次加载页面时，initial-scale 属性控制初始缩放级别，即 1 个视口像素 = 1 个 CSS 像素。 User-scalable、maximum-scale 和 minimum-scale 属性控制用户如何放大或缩小页面。

您可以设置一个示例 html 页面并包含视口标记并更改 initial-scale 属性以查看差异。还可以尝试在不同的视口大小和方向上查看页面。

initial-scale：访问页面时的初始缩放。 1.0 不缩放。

为了回答 initial-scale=2.0 的含义，这里举一个使用 2.0 的例子：

除上述之外，您可能还需要指定查看区域的初始缩放系数。如果您想将页面的视口设置为等于设备的宽度，并使其默认放大 2 倍，例如，此属性将派上用场。其代码如下所示：。

上面的图片显示了这会是什么样子——虽然它不是一个特别实际的演示初始比例设置必须提供的可能性，但基本点应该很清楚：内容首先被放大了 2 倍加载。

https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/#initial-scale

结帐的一些很好的参考： https://css-tricks.com/snippets/html/responsive-meta-tag/ https://css-tricks.com/probably-use-initial-scale1/

Answer 2

我翻阅了一本旧书，找到了关于价值观含义的答案。我无法使用 W3C 等更官方的资源对其进行验证。

initial-scale 的可能值范围在 10% - 1000% 或 0.1 - 10.0 之间。

0.1 = 10% 缩放

0.2 = 20% 缩放

...

1.0 = 100%

2.0 = 200%

...

10.0 = 1000%

我还没有在实际设备上测试这些。