版权声明： https://blog.csdn.net/Helloyongwei/article/details/82585673
meta初探
在每个html页面的header部分常常会看见一个meta标签. 这个标签中最常写的就是下面的内容:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">这个标签内的内容表示啥意思呢? name为viewport表示供移动设备使用. content定义了viewport的属性.
width表示移动设设备下显示的宽度为设备宽度(device-width)
height表示移动设设备下显示的宽度为设备宽度.
user-scalable表示用户缩放能力, no表示不允许.
initial-scale表示设备与视口的缩放比率
maximum和minimum分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大.
上面的meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.
meta viewport
meta viewport是专为移动设备下显示所设计的.只有检测到在移动设备上使用包含meta的文档时, meta标签才会起作用.
在meta标签中, 当name为viewpor时, 有下面的约定
| Value | 可能值 | 描述 |
|---|---|---|
| width | 一个正整数或者字符串 device-width | 以pixels（像素）为单位， 定义viewport（视口）的宽度。 |
| height | 一个正整数或者字符串 device-height | 以pixels（像素）为单位， 定义viewport（视口）的高度。 |
| initial-scale | 一个0.0 到10.0之间的正数 | 定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率。 |
| maximum-scale | 一个0.0 到10.0之间的正数 | 定义缩放的最大值；它必须大于或等于minimum-scale的值，不然会导致不确定的行为发生。 |
| minimum-scale | 一个0.0 到10.0之间的正数 | 定义缩放的最小值；它必须小于或等于maximum-scale的值，不然会导致不确定的行为发生。 |
| user-scalable | 一个布尔值（yes 或者no） | 如果设置为 no，用户将不能放大或缩小网页。默认值为 yes。 |
参考资料
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta
https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag
https://blog.csdn.net/zhouziyu2011/article/details/60570547
https://www.cnblogs.com/2050/p/3877280.html