<meta>标签的initial scale的值大小，跟视觉视口关系？

Question

<meta>标签的initial scale的值大小，跟视觉视口关系？
查阅资料得知 initial-scale=理想视口宽度/视觉视口宽度。那么initial-scale，1变为2视觉视口宽度不应该是缩小的吗，为什么看到有人说initial-scale调整的是视觉视口的放大与缩小？当 initial-scale=2时，视觉视口放大了。怎么理解呢？

Answer 1

initial-scale
Controls the zoom level when the page is first loaded. Minimum: 0.1. Maximum: 10. Default:1. Negative values: ignored.

以上内容引用自：https://developer.mozilla.org...

不知道为什么问题中的描述会说 initial-scale=理想视口宽度/视觉视口宽度，从单词来看，initial-scale 主要是 initial 和 scale 这两个，也就是初始，缩放。

具体的可以看看 mdn 上的介绍。

Answer 2

移动端页面实际测试情况

1. • H5页面在移动端，在不设置<meta>标签,viewport布局视口width和initial-scale页面初始缩放比例的时候。

     视觉视口(visual viewport)的宽度是981，且在移动端，页面被缩小(页面展示完整)。

2. • H5页面在移动端，在设置了<meta>标签，<meta name="viewport" content="width=device-width">，即设置了布局视口的宽度，但是不设置页面初始缩放比例。
     ( device-width等于理想视口的宽度，所以设置width=device-width就相当于让布局视口等于理想视口。)

     此时视觉视口(visual viewport)的宽度等于设备宽度，在移动端，页面大小无缩放(页面没有展示完整，只展示出了部分区域，页面无横向滚动条)。

3. • H5页面在移动端，在设置了<meta>标签，<meta name="viewport" content="width=device-width,initial-scale=1">，即设置了布局视口的宽度且设置页面初始缩放比例为1。

     此时的效果同上，此时视觉视口(visual viewport)的宽度等于设备宽度，在移动端，页面大小无缩放(页面没有展示完整，只展示出了部分区域，页面无横向滚动条)。

4. • H5页面在移动端，在设置了<meta>标签，<meta name="viewport" content="width=device-width,initial-scale=2">,即设置了布局视口的宽度且设置页面初始缩放比例为两倍大小。

此时页面初始缩放比例为两倍大小，此时页面在移动端被放大了两倍(页面没有展示完整，展示的内容是设置初始缩放大小为1时的一半大小，页面无横向滚动条)，此时视觉视口(visual viewport)的宽度等于设备宽度<font color="FireBrick">并没有变大</font>

5. • H5页面在移动端，在设置了<meta>标签，<meta name="viewport" content="width=device-width,initial-scale=3">,即设置了布局视口的宽度且设置页面初始缩放比例为三倍大小。

*此时的效果同上，页面初始缩放比例为三倍大小，此时页面在移动端被放大了三倍(页面没有展示完整，展示的内容是设置初始缩放大小为1时的三分之一大小，页面无横向滚动条)，此时视觉视口(visual viewport)的宽度window.innerWidth等于设备宽度<font color="FireBrick">并没有变大</font>

6. • H5页面在移动端，在设置了<meta>标签，<meta name="viewport" content="width=device-width,initial-scale=0.5">,即设置了布局视口的宽度且设置页面初始缩放比例为二分之一大小时。

此时页面初始缩放比例为二分之一大小，此时页面在移动端被缩小了两倍(页面展示区域变大，展示的内容是设置初始缩放大小为1时的两倍大小，页面无横向滚动条)，此时视觉视口(visual viewport)的宽度window.innerWidth是设备宽度的<font color="FireBrick">两倍大小</font>

7. • H5页面在移动端，在设置了<meta>标签，<meta name="viewport" content="width=device-width,initial-scale=0.25">,即设置了布局视口的宽度且设置页面初始缩放比例为四分之一大小时。

此时页面初始缩放比例为四分之一大小，此时页面在移动端被缩小了四倍(页面展示区域变大，展示的内容是设置初始缩放大小为1时的四倍大小，页面无横向滚动条)，此时视觉视口(visual viewport)的宽度window.innerWidth是设备宽度的<font color="FireBrick">四倍大小</font>

总结

在设置了<meta>标签，<meta name="viewport "content="width=device-width">即布局视口=设备宽度=理想视口之后

• 当initial-scale=1时，此时页面不进行缩放，此时视觉视口(visual viewport)的宽度等于设备宽度，窗口中可显示多少页面区域，取决于设备宽度。
• 当initial-scale<1时，初始缩放比例越小，页面缩小程度越大(两者呈正比),视觉视口越大(两者呈反比)，窗口中可显示页面区域越多，但是页面中内容尺寸越小。
• 当initial-scale>1时，初始缩放比例越大，页面放大程度越大(两者呈正比)，视觉视口此时不变(始终等于设置宽度)，窗口中显示的页面区域越少，页面中内容尺寸越大。