initial-scale=1.0是什么意思？

Question

25

我无法找到一个明确的定义来解释 initial-scale=1.0 和 initial-scale=2.0 的含义。

它们两者有什么区别呢？

我知道 initial-scale 与缩放有关，但我不知道它从1-10的值具体意味着什么。

- Robert

initial-scale=1.0 没有缩放，我相信这是默认值。 - Andrew Li

2个回答

7

我翻译后的结果如下：

我查阅了一本旧书，找到了关于这些值的含义。然而，我并没有使用W3C等官方资源来验证。

initial-scale 的可能取值范围为10%至1000%，或者0.1至10.0。

0.1 = 10% 缩放比例

0.2 = 20% 缩放比例

...

1.0 = 100%

2.0 = 200%

...

10.0 = 1000%

我还没有在实际设备上进行测试。

- Robert

1

你可能会发现这两个测试工具很有用：这里和这里。 - Michael Benjamin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JamesG · Accepted Answer

一般的移动响应式网站会在头部包含以下HTML meta标签：

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

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

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

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

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

要回答initial-scale=2.0在此处的含义，以下是使用2.0的示例：

除上述内容外，您可能希望指定查看区域的初始缩放比例。如果您想将页面的视口设置为与设备的宽度相等，并且希望默认情况下以2倍的缩放比例进行缩放，那么此属性将非常有用。实现这一目标的代码如下所示：

上面的图像显示了这是什么样子 - 尽管这不是特别实际的展示初始缩放设置所能提供的可能性，但基本观点应该是清晰的：在首次加载时，内容会放大2倍。