meta name= viewport 知识补充

网页不能直接识别移动设备的实际像素大小

再没有设置meta viewport的时候，网页只能识别硬件的物理像素，而非软件像素。

物理像素：硬件本身的实际像素大小

软件像素：设备尺寸限制，过大的像素并不能带来很好的体验，显示的内容过多反倒无法正常使用，于是有了软件像素，软件像素是基于一定像素比得到的值。

比如 iPhone X的软件像素是：375px*812px；它的比是：3；那么它的物理像素就等于：(375*3)*(812*3)

更多的对比可以去这个网站查看：mydevice

然而实际上移动端设备都会有一个默认的宽度：980px，所以，即便我们没有设置meta viewport，网页也不可能真的使用物理像素宽度。

meta viewport 标签

一般我们会设置如下内容

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

name="viewport" 表示这是一个视口配置

width=device-width 表示显示的宽度为设备宽度，也就是说需要浏览器显示为软件像素，当然也可以是正整数

initial-scale=1.0 表示网页显示的缩放比，1.0表示默认原样，一般也不会改动这个

除此以外还有一些配置：

禁止用户放大缩小网页

<meta  name="viewport"  content="user-scalable=no">

no 表示不允许放大缩小

yes 表示允许放大缩小

不设置user-scalable默认就是user-scalable=yes

限制用户放大网页的大小

<meta  name="viewport"  content="maximum-scale=2.0">

这个表示用户手动放大最大只能到2倍

限制用户缩放网页的大小

能限制最大就能限制最小

<meta  name="viewport"  content="minimum-scale=0.5">

这个表示用户手动放大最小只能到0.5倍

注意： 最大和最小会影响到initial-scale，类似于css中max-wdith、min-width、width之间的关系。