详解meta-viewport标签中的width和initial-scale属性

参考链接 👈 但我觉得里面关于分析单独设置width和initial-scale属性的部分有些问题，所以把我思考的内容整理了出来写成本文。如有错误，敬请指正。

视口

视口可以理解为设备或文档对象的逻辑尺寸。

前端ppk大神认为，移动设备上有三个viewport（视口）。

但可以换句话说，可以缩放的浏览器中都具有三个视口概念，分别是 布局视口、视觉视口、理想视口。

1. 布局视口 layout viewport

布局视口可以理解为文档对象的逻辑尺寸，单位为逻辑像素（CSS像素）。

在PC端上，布局视口宽度默认等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。

由于历史原因，一些移动设备的浏览器具有默认的布局视口宽度（单位CSS像素）：

获取布局视口的DOM API：

  <script>
      console.log(document.documentElement.clientWidth)
  </script>

2. 理想视口 ideal viewport

理想视口是与设备相关的，是布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时（逻辑尺寸，即有多少个逻辑像素），才是理想视口，此时文档对象宽度与屏幕宽度相同。

移动设备一般具有固定的DPR，即在缩放100%时，用多少个物理像素显示一个逻辑像素，在Web开发中就是用多少个物理像素去显示一个CSS像素。

理想视口宽度 = 移动设备横向分辨率 / DPR

获取理想视口的DOM API：

<script>
    console.log(window.screen.width);
</script>

3. 视觉视口 visual viewport

用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。

视觉视口的宽度 = 理想视口宽度 / 缩放比例

---

利用meta标签控制视口

移动设备的默认布局视口往往大于理想视口，此时就会在横向出现滚动条才能完整的容纳页面。我们需要的是将页面的布局视口设置为理想视口，这就改轮到meta标签出场了。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

该meta标签的作用是让layout viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让layout viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的布局视口默认值，也就是说会出现横向滚动条。

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。

meta viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的。

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：

属性名	取值	描述
width	正整数或device-width	定义视口的宽度，单位为像素
height	正整数或device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义放大最大比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义缩小最小比例，它必须大于或等于minimum-scale设置
user-scalable	yes / no	定义是否允许用户手动缩放页面，默认值 yes

这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

---

width属性

width属性用于设置页面的布局视口宽度，属性值不带单位，默认单位为像素。

其默认值在不同浏览器中不同，但大多数为980。

但需要注意的是（以下结论都基于Chrome的测试工具）：

1. 当只设置width属性值，而不指定initial-scale属性值时，大多数浏览器会自动缩放。

   如果width属性值大于理想视口宽度，则视觉视口放大为width的值，计算得到scale小于1.0；

   如果width属性值小于理想视口宽度，则视觉视口缩小为width的值，计算得到scale大于1.0；

   这么做的目的是让设备屏幕把完整的页面呈现出来（页面横向塞满屏幕，计算得到scale），此时：

   布局视口宽度 = 视觉视口宽度 =  理想视口宽度 / 缩放比例
   

   设置width而不指定initial-scale时， 设置minimum-scale = 1.0会能够阻止浏览器放大视觉视口，设置maximum-scale = 1.0 能够阻止浏览器缩小视觉视口。（这里有点绕，可以联想下放大镜）

2. 将width属性值设置为device-width时，大多数浏览器都能把页面的布局视口宽度变为当前设备的理想视口宽度。

   但在iphone和ipad上，无论是竖屏还是横屏，device-width宽度都是竖屏时理想视口的宽度。

---

initial-scale属性

initial-scale属性用于设置页面初始的缩放比例，缩放比例为理想视口与视觉视口的比值。

即：scale = idealViewport / visualViewport

但需要注意的是（以下结论都基于Chrome的测试工具）：

1. 当只指定initial-scale属性，而不设置width属性时，浏览器会将布局视口宽度设置为视觉视口宽度，以将页面正好铺满屏幕。可以认为这是一条定律。

   布局视口宽度 = 设备理想视口宽度 / initial-scale
   

2. 当指定initial-scale = 1，而不设置width属性时，大部分浏览器会将布局视口宽度设置为设备理想视口宽度。这是由推导得来的。

   因为 initial-scale = 1
   所以 视觉视口 = 理想视口 ÷ 1.0 = 理想视口
   又因为 没有设置width
   所以 视觉视口 = 布局视口
   所以 视觉视口 = 布局视口 = 理想视口
   

   但是WP7系统的IE浏览器中使用横屏时，当指定initial-scale = 1，而不指定width属性时，理应的结果应该是视觉视口等于理想视口时，但偏偏此时的布局视口宽度是竖屏时的理想视口宽度。

3. ❗ 当设置initial-scale=1且同时设置width属性时，如果由理想视口除以init-scale计算得到的视觉视大于width，则width会被浏览器重置为视觉视口。（如果计算得到的视觉视口小于布局视口，就不会出现问题，只是会出现滚动条）原因是 👇

   如果视觉视口大于布局视口，就存在逻辑上的问题。

   比如说，我iphone8设备理想视口为375px，页面init-scale设置为0.75，那么视觉视口等于375/0.75 = 500px，若width设置为375或device-width，也就是出现了视觉视口大于布局视口的情况。

   那浏览器就纳闷了，你要让我显示500px范围宽的页面，但你告诉我页面实际上只有375px宽，不是奇了怪了吗？所以当视觉视口大于布局视口时，布局视口宽度width会被重置成视觉视口宽度，这应该是浏览器的策略，用于避免显示上的逻辑问题。

---

width=device-width, initial-scale=1

目的：

让我们写的页面在水平方向上恰好与各个设备的屏幕严丝合缝，需要将页面布局视口设置为设备理想视口。

但是：

• 只设置width = device-width 苹果移动设备横屏时会有bug
• 只设置init-scale = 1 WP7系统IE浏览器横屏会有bug

终极方案：

将meta:vp标签的属性值设置为width=device-width, initial-scale=1就不仅能够将页面的布局视口自动设置为各个移动设备的理想视口，还能够同时兼容iphone、ipad的Safari以及WP7 IE浏览器的横屏问题。

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