viewport 说明

手机、PAD的DPI要高于PC显示器。比如CSS定义为14px大小字体，在PC上看起来大小正好。但在手机上看起来就要比PC上小很多。

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性。这个属性可以反映出手机和一般PC在DPI上的差距。比如vivo x27手机其devicePixelRatio值为3，就是x27的DPI是一般PC的3倍（PC的值是1）。

为了解决PC和移动设备DPI不同的问题，由苹果公司最先在iOS Safari中采用了viewport meta标签。该标签旨在消除移动端DPI要高于PC端的问题，方法是在移动端用几个像素来模拟一个像素，以使显示出来的文字和图像同PC上相似大小。（但这样会导致分网页分辨率降低）

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

我的理解：

width=device-width 这句代码是定义画布的宽度。注意，这里的宽度可是基于PC DPI的宽度。比如vivo x27手机分辨率为2340*1080。那么device-width就是1080，而vivo x27 DPI是PC的3倍，也就是说，网页的实际宽度为1080 * 3 = 3240个像素（会溢出屏幕）。因为在该手机上3240像素的物理宽度和PC上1080像素宽度相等。之所以设置此参数，是因为我前面提到的，模拟像素导致分辨率降低的问题。

minimum-scale和maximum-scale可以理解为用多少个像素来模拟PC上的一个像素（两者设为同样值）。

1.0：用1.0 * devicePixelRatio个像素模拟PC上一个像素

2.0：用2.0 * devicePixelRatio个像素模拟PC上一个像素

0.3：用0.3 * devicePixelRatio个像素模拟PC上一个像素（接近于手机实际分辨率了）

user-scalable=no 表示禁止缩放网页

网上文章对viewport的解释都是xxx xx,什么视口这口那口一大堆绕半天很难理解。这个viewport就是用来调整浏览器DPI的。