什么是initial-scale = 1.0?

Rob*_*cha 10 html css media-queries

我无法找到关于什么initial-scale=1.0initial-scale=2.0方法的明确定义.

它们都意味着什么?

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

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

Jam*_*esG 11

通常的移动响应站点将在头部包含HTML元标记,如下所示:

<meta name="viewport" content="width=device-width, initial-scale=1">
Run Code Online (Sandbox Code Playgroud)

在标记内,width属性控制视口的大小.它可以设置为像width = 400这样的精确像素数,也可以设置为特殊device-width值,它是CSS像素中屏幕宽度的100%.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/

  • 我认为这引出了一个问题:“initial-scale”的默认值是多少?如果我省略这个元标记,它的价值是什么?合理的默认值似乎是 1,但显然情况并非如此,因为我们需要在元标记中指定它。 (2认同)

Rob*_*cha 5

我浏览了一本旧书,找到了价值观的答案.我无法使用更官方的资源(例如W3C)对其进行验证.

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

0.1 = 10%变焦

0.2 = 20%变焦

...

1.0 = 100%

2.0 = 200%

...

10.0 = 1000%

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