前两篇博客把pixels和viewport的概念解释的很清楚。现在，使用元标记设置视口。meta标签里面的内容主要是提供这个HTML页面的meta信息。简单来说，就是你用这些信息告诉浏览器如何解析这个HTML文件。例如，标签告诉浏览器HTML文件的字符编码格式是utf-8。浏览器在解析HTML文件时，由于meta标签位于头部，所以会先获取这些信息，然后浏览器使用utf-8编码来解析HTML文件中的字符。当然，除了上面的简单格式，meta标签更常见的是name+content的形式：name属性的值告诉browser，meta标签设置为format-detection，其具体值为content中的telephone=no，表示忽略数字为电话号码的识别。Viewportsettings上一篇博客末尾提到，我们做的适配是调整layoutviewport的大小，meta标签可以用来调整layoutviewport的大小。上网搜索移动适配，肯定会看到如下代码：先介绍这几个属性：属性名描述width设置布局视口的宽度，为正整数，或者字符串width-deviceinitial-scale设置页面的初始缩放值，为一个数字，用户允许的最小缩放值可以是带小数点的数字。maximum-scale允许用户的最大缩放值。它可以是带小数点的数字。重要，很少用到user-scalable是否允许用户缩放，值为“no”或“yes”，no表示不允许，yes表示允许low字符串之一-dpi,device-dpi。Android支持，当target-densitydpi=device-dpi时，css中的1px将等于物理像素中的1px。回到应用场景，使用这个标签的主要目的是适配移动端，通常是创建一个专门为移动端设计的页面。因此，我们在设置布局视口的时候，当然希望视口的大小等于理想视口。需求说清楚了，下面我们看看如何使用上表中的属性来实现。使用width设置布局视口的宽度。我们将它的值设置为device-width，也就是设置为设备的实际宽度。理想视口的宽度等于设备的宽度，因此这段代码将视口设置为理想视口的大小。可以分别使用window.innerWidth和document.document.clientWidth来查看：当然，只要你高兴，也可以设置成其他值，比如设置width为1000，那么layoutviewport会更大比视觉视口，并且会有一个滚动条。实现的时候最好在代码中加上initial-scale=1.0，防止浏览器缩放页面。使用scaleinitial-scale用于设置页面首次加载时布局视口相对于理想视口的大小。具体计算公式为：layoutviewport=idealviewport/scalescale=idealviewport/layoutviewport需要注意的是，使用scale设置，无论计算出来的layoutviewport的值是多少，都会被浏览器自动缩放与视觉视口的大小相等，并且不会出现滚动条。具体看下面的例子，我们设置红框的大小为100x100px，字体大小为32px。initial-scale=1.0设置scale值为1.0，则布局视口的大小等于理想视口的大小：此时红框中显示的大小为100px，字体大小为32px。initial-scale=0.5设置比例值为0.5，那么布局视口的大小是理想视口大小的两倍，即750px：但是浏览器会缩放布局视口以匹配视觉视口的大小。对于已经是750px视觉视口的layoutviewport，需要先缩放0.5倍才能恰好适合375px。所以100px的红框只会显得50px的大小，字体也会相应缩小一半。如果设计图的尺寸是750px，那么样式尺寸可以按照设计图来写。最后，只要将scale设置为0.5，视觉效果就会降低。这里用window.innerWidth打印出来的可视视口尺寸是错误的，但是用screen.width打印出来的。具体原因在网上没有查到。知道的同学欢迎在评论区留言~initial-scale=2.0设置scale的值为2，则布局视口的大小为理想视口的一半，即188px：同理，浏览器会自动缩放。原本188px的layoutviewport，需要放大两倍才能填满visualviewport。此时100px的红框会放大到200px，字体大小也会放大到64px。width和scale可以同时使用，只是兼容性不同。我们的目的是将布局视口设置为理想视口。为了兼容所有设备，有如下方案：如果两个设置的大小不同，取大的那个。将width设置为device-width，然后将zoom值设置为1，完全将layoutviewport的大小限制为visualviewport。其他属性用于控制缩放。实际上设置maximum-scale=1.0和minimum-scale=1.0等同于设置user-scalable=no。如果未禁用缩放，则布局视口的大小在缩放时仍会发生变化。总结使用视口的目的是设置布局视口的大小，使其在移动设备上能够正常显示。
