viewport 小知识

开发移动webapp 时，都会用到viewport。

按字面意思，就是视点，瞭望口，这里理解为网页的绘制区域

有几个属性 width  initial-scale 

有三个关键字  (document.documentElement)clientWidth, deviceWidth,(window)innerWidth

width 就是clientWidth  

deviceWidth 是屏幕的物理宽度  真实的像素宽度pxWidth 还需要乘以devicePixelRatio

innerWidth 就是屏幕的绘制宽度  只与 scale 和 deviceWidth 有关 deviceWidth/scale

当 同时设置 width inital-scale 时

clientWidth 取大的一个   总是大于等于innerWidth

如 deviceWidth:400 sclae:2   width:300  这时 clientWidth max(400/2,300)  innerWidth:200

当clientWidth <  pxWidth（真实的像素宽度） 就会出现 图片模糊

一般解决方案时 width=device-width     scale=1/devicePixelRatio  让clientWidth 和 pxWidth 尽量接近