移动端web页面适配布局--像素和viewport

最近学习移动web页面的开发，写个日志记录一下移动端页面需要注意的地方。
一、关于像素的知识
这里像素有2个概念，一个是物理像素，一个是逻辑像素，对于我这个初学者深有体会的，移动开发的时候百度iPhone5的屏幕分辨率的时候是640X1136,在自己开发过程中发现又不是这个分辨率，这里就是物理像素和逻辑像素的区别了，iPhone5的物理像素是640X1136,但是iPhone5的逻辑像素是320X568

作为web开发者需要使用的是逻辑像素，另外物理像素与逻辑像素有个转化叫做dpr（设备像素缩放比例），比如1px=（dpr）² * dp；具体的不需要掌握，了解就行。
二、viewport的相关内容
1.移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。上面的百度复制来的，按我的理解就是显示网页的区域，如果是pc端的页面会渲染在一个980px的viewport中（根据设备有所不同），然后会自动形成缩放；这里viewport分为两层，一个visual viewport是视口viewport，另外一个是layout viewport底图viewport。使用viewport的固定大小开发会造成缩放，链接不可点击等一系列问题，用户体验极差。因此，这里就需要Meta标签对于viewport的。
2.meta标签

 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

上面标签的意思就是 viewport的 width等于设备的width，页面初始缩放为1，不允许用户缩放页面。

• width:设置布局viewport的特定值（“device-width”）
• initial-scale:设置页面的初始缩放
• minimum-scale：最少缩放
• maximum-scale：最大缩放
• user-scalable:用户能否缩放
  这里注明一下使用initial-scale会默认使用width=device-width这一属性