【移动端】基础知识

像素

css中所用的“px”和移动设备的物理像素是不一样的

• px：CSS pixels逻辑像素，浏览器使用的抽象单位
• dp,pt：device independent pixels 设备无关像素
• dpr：devicePixelRatio 设备像素缩放比

平面上： 1px = dpr² x dp
纬度上： 1px = 2 x dp

为什么iphone5是320px*568px?
因为：dpr=2
所以：640dp 1136dp -> 320px 568px
相当于是四个物理像素渲染一个css像素，就会更清晰

在dpr=2情况下的对比

viewport

浏览器默认为我们做了两件事

1. 页面渲染在980px（ios的默认viewport）viewport
2. 缩放

设计移动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">