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

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

meta标签

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

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

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

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

viewport的设置

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

先介绍一下这几个属性：

属性名

说明

width

设置layout viewport的宽度，为一个正整数，或字符串width-device

initial-scale

设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale

允许用户的最小缩放值，为一个数字，可以带小数