像素
- 物理像素 (pt)
- 设备独立像素 (px)
- dpr = 物理像素／设备独立像素
- css中的1px并不是代表屏幕上的1px，你分辨率越大，css中1px代表的物理像素就会越多，devicePixelRatio的值也越大。
移动设备上的viewport
layout viewport
1.移动端浏览器认为自己必须能让所有网站都正常显示。
2.如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱。
3.浏览器就决定 默认情况下 把viewport设为一个较宽的值，比如980px(浏览器之间会有不同)。
4.可以在meta viewport content="width=..."中设置layout viewport。
5.浏览器默认的viewport叫做 layout viewport。
6.获取方式document.documentElement.clientWidth。visual viewport
1.浏览器的可视区域的大小，大小是屏幕中css像素的数量。
2.缩放会影响visual viewport的大小。
3.浏览器最大限度地缩小模式时 visual＝layout。
3.获取方式window.innerWidth。上面两种viewport的不足
1.这两种都忽视了手机自身的尺寸。
2.用户可能需要缩放或者横向滚动才能看到全部内容。
3.字，图可能因为在一个高密度像素的屏幕里显示得太 小而无法看清。ideal viewport（最适合移动设备的viewport）
1.ideal viewport的宽度等于移动设备的屏幕宽度
2.ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。http://viewportsizes.com
3.意义：ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。实现方式
1.移动设备默认的viewport是layout viewport.
2.通过设置
<meta name="viewport" content="width=device-width">
来实现ideal viewport。
3.进一步禁止缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
