viewport 说明

手机的DPI高于PC显示器。在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性。这个属性可以反映出手机和一般PC在DPI上的差距。比如vivo x27手机其devicePixelRatio值为3，就是x27的DPI是一般PC的3倍。网页中定义的像素尺寸在PC上看起来大小正好的话，放到该手机上物理大小只有PC上的1/3（像素是一样多的），看起来比较吃力。苹果公司最先采取了措施，它提出了一个方案用来解决这个问题。在iOS Safari中定义了一个viewport meta标签，用来创建一个虚拟的布局视口（layout viewport），而这个视口的分辨率接近于PC显示器，Apple将其定义为980px（但苹果显示器实际分辨率可能要高于此）这就很好的解决了早期的页面在手机上显示的问题，由于两者之间的宽度趋近，CSS只需要像在PC上那样渲染页面就行，原有的页面结构不会被破坏。现在各主流浏览器基本都支持viewport了。简单说，如果在我网页中定义了viewport ，那么我的手机浏览器就会用3个物理象素来模拟一个CSS像素。同像素尺寸图形在手机和PC上看起来一样大了。缺点是分辨率降为了原先的1/3。

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

网上文章对viewport的解释都是xxx xx,什么视口这口那口一大堆绕半天不抓住本质。这个viewport就是用来调整浏览器DPI的，默认情况下设置为和PC显示器同样大小。（如上面参数）width=device-width这个无需改变。minimum-scale和maximum-scale可以理解为用多少个像素来模拟PC上的一个像素（两者设为同样值）。

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

2.0：用2.0 * devicePixelRatio个像素模拟PC上一个像素(DPI更低了)

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