像素
css中所用的“px”和移动设备的物理像素是不一样的
- px：CSS pixels逻辑像素，浏览器使用的抽象单位
- dp,pt：device independent pixels 设备无关像素
- dpr：devicePixelRatio 设备像素缩放比
平面上： 1px = dpr2 x dp
纬度上： 1px = 2 x dp
为什么iphone5是320px*568px?
因为：dpr=2
所以：640dp 1136dp -> 320px 568px
相当于是四个物理像素渲染一个css像素，就会更清晰
在dpr=2情况下的对比
viewport
浏览器默认为我们做了两件事
- 页面渲染在980px（ios的默认viewport）viewport
- 缩放
设计移动web为什么不使用默认的980px的布局viewport？
因为不同系统不同设备的默认值可能不同，而且页面会缩小显示，不友好，链接不可点，有缩放，缩放后又有滚动。
font-size为40px等于PC上12px同等物理大小，不规范
可以通过js查各种宽度属性
document.body.clientWidth 980
window.innerWidth 1030
<!---最常用的设置-->
<meta name="viewport" conten="width=device-width,initial-scale=1,user-scale=no">
