移动端适配之三：使用meta标签设置viewport

前两篇博客，把像素和viewport的概念讲清楚了。如今开始，用meta标签来设置viewport。

meta标签

meta标签里面的内容，主要是提供关于这个HTML页面的元信息的。简单点说，就是你用这些信息来告诉浏览器，应该如何解析这个HTML文件。好比

<meta charset="utf-8">
复制代码

这个标签是告诉浏览器，该HTML文件的字符编码格式是utf-8。当浏览器解析该HTML文件时，因为meta标签位于头部，会先获取到这个信息，而后浏览器就用这个utf-8编码来解析这个HTML文件中的字符。

固然，除了上面这种简单的格式外，meta标签更常见的是这种name + content的形式：

<meta name="format-detection" content="telephone=no" />
复制代码

name属性的值告诉浏览器，这个meta标签设置的是format-detection，其具体值是content中的telephone=no，即忽略将数字识别成电话号码。

viewport的设置

上一篇博客的最后已经提到，咱们所作的适配，就是要调整layout viewport的大小，而用meta标签就能够调整layout viewport的大小。上网去搜移动端适配，必定会看到下面这句代码：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

先介绍一下这几个属性：

属性名	说明
width	设置layout viewport的宽度，为一个正整数，或字符串width-device
initial-scale	设置页面的初始缩放值，为一个数字，能够带小数
minimum-scale	容许用户的最小缩放值，为一个数字，能够带小数
maximum-scale	容许用户的最大缩放值，为一个数字，能够带小数
height	设置layout viewport的高度，这个属性对咱们并不重要，不多使用
user-scalable	是否容许用户进行缩放，值为"no"或"yes", no 表明不容许，yes表明容许
target-densitydpi	值能够为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个。安卓中支持，当 target-densitydpi=device-dpi 时， css中的1px会等于物理像素中的1px。

回到应用场景，咱们用这个标签的主要目的是作移动端的适配，通常都是作一个专门为移动端设计的页面。因此，咱们在设置layout viewport时，固然但愿这个viewport的尺寸等于ideal viewport。

需求已经明确了，接下来看看咱们如何利用上面表里的属性来实现。

利用width

<meta name="viewport" width="device-width">
复制代码

这个width，就是用来设置layout viewport的宽度。咱们设置其值为device-width，也就是设置成设备的实际宽度。而ideal viewport的宽度是与设备的宽度相等的，因此，这句代码就把viewport设置成了ideal viewport的大小。能够分别用window.innerWidth和document.document.clientWidth查看：

固然，只要你高兴，也能够设置成别的值，好比把宽度设置成1000，那么layout viewport就会比visual viewport大，浏览时会有一个滚动条。具体实现时，代码上最好加上initial-scale=1.0，防止浏览器对页面进行缩放。

利用scale

<meta name="viewport" initial-scale="1.0">
复制代码

Initial-scale用来设置初次加载页面时layout viewport相对于ideal viewport的大小。具体计算公式是：

layout viewport = ideal viewport / scale
scale = ideal viewport / layout viewport
复制代码

须要注意的是，利用scale设置，不管计算出来的layout viewport的值大小如何，最后都会被浏览器自动缩放到与visual viewport大小相等，并不会出现滚动条。具体看下面的例子，咱们设置的红框大小为100x100px，字体大小为32px。

initial-scale=1.0

设置scale值为1.0，那么layout viewport的大小与ideal viewport大小相等：

此时红框显示出来的大小就是100px，字体大小也就是32px。

initial-scale=0.5

设置scale值为0.5，那么layout viewport的大小就是ideal viewport的两倍，即750px：

可是浏览器会把layout viewport进行缩放，从而达到与visual viewport大小适配。对于已是visual viewport750px的layout viewport，须要缩放到之前的0.5倍，才能正好适配375px。因此，100px的红框看起来只会有50px的大小，字体也会对应的缩小一半。若是设计图的大小是750px，那么样式大小彻底能够按照设计图来写，最后只要设置scale为0.5，视觉上的效果就是缩小后的。

这里用window.innerWidth打印出来的visual viewport大小不对，用screen.width打印出来是对的，具体缘由网上也没查到。有知道的同窗欢迎在评论区留言~

initial-scale=2.0

设置scale的值为2，那么layout viewport的大小就是ideal viewport的一半，即188px：

一样的，浏览器会自动缩放。原本是188px的layout viewport，须要放大两倍，才能填满visual viewport。此时，100px的红框会被放大成200px，字体大小会放大到64px。

同时使用

width和scale两种方式均可以实现，可是兼容性不一样。咱们的目的，是为了把layout viewport设置成ideal viewport的带下。为了能兼容全部的设备，就有了下面的方案：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

若是二者设置的大小不同，那么会取较大者。设置width为device-width，而后再设置缩放值为1，就彻底限制了layout viewport的大小为visual viewport了。其余的属性，都是来控制缩放的。其实，设置了maximum-scale=1.0, minimum-scale=1.0就至关于设置了user-scalable=no了。若是不由用缩放，那么layout的viewport的大小在缩放时仍是会变的。

小结

用viewport的目的，是为了设置layout viewport的大小，从而保证能在移动端设备上合适的显示出来。