我无法找到一个明确的定义来解释 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
我无法找到一个明确的定义来解释 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
<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
属性控制用户如何缩放页面。initial-scale
属性以查看差异。还可以尝试在不同的视口大小和方向下查看页面。
要回答initial-scale=2.0在此处的含义,以下是使用2.0的示例: 除上述内容外,您可能希望指定查看区域的初始缩放比例。如果您想将页面的视口设置为与设备的宽度相等,并且希望默认情况下以2倍的缩放比例进行缩放,那么此属性将非常有用。实现这一目标的代码如下所示:initial-scale:访问页面时的初始缩放比例。1.0不缩放。
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.0
没有缩放,我相信这是默认值。 - Andrew Li