viewprot及像素
在进行页面重构的时候，一般都会在head标签中有这么一行代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
关于这行代码，开始的时候只知道为了适应移动端的显示，但是具体是怎么样的一个原理，每个属性（暂称）都有什么样的效果则不是很清楚，因此在看了很多前辈的一些分析后，自己从中记住了以下知识点，以作备忘。
关于网页在浏览器适配主要有两方面需要了解，第一个是像素，第二个是viewport：
像素
屏幕分辨率
屏幕分辨率是屏幕上系那是的像素个数。比如分辨率160*128则是水平方向有160个像素数，垂直方向128个像素数。屏幕尺寸一样的情况下，分辨率越高，效果越精细。
设备分辨率/像素密度 density
设备分辨率，又称输出分辨率（印刷品分辨率）。每英寸可产生的点数（DOTS PER INCH， 缩写DPI）。也称图像分辨率（PIXELS PER INCH）。也叫像素密度，表示每英寸所有的像素数。计算公式：
PPI = √长*长 + 宽*宽 / 屏幕尺寸
横向分辨率的平方加上竖向分辨率的平方 然后除以屏幕尺寸。
- 屏幕分类 密度分界 常见屏幕尺寸 默认缩放比例
- Idpi 120 240*320 0.75
- mdpi 160 320*480 1.0
- hdpi 240 480*800 1.5
- xhdpi 320 640*960 2.0
设备独立像素 DP/DIP/DIPS
Density-independent pixels, 设备独立像素，与屏幕密度即屏幕分辨率（DPI或PPI）有关。在屏幕密度为160的显示屏上，1dip = 1px。
强调的是，设备独立像素是一个官方定义，1dip = 160DPI/PPI。
px = dp * density(dpi) / 160
当屏幕密度为160的时候，屏幕的1px = 1dip;
1px / dp = density(dpi) / 160
设备像素比 devicePixelRatio
window.devicePixelRatio 是设备上物理像素(device-width)与设备独立像素(device-independent pixels)的比（一个点内有多少像素）。
window.devicePixelRatio = 物理像素/dips
viewport
首先要知道，css中的1px不代表屏幕上的1px。分辨率越大，css中的1px代表的物理像素就会越多。
首先通俗定义：移动设备上的viewport是设备的屏幕上用来显示网页的区域。默认情况下，移动设备的viewpoint大于浏览器可视区域。所以为了在移动网页上正常显示传统网页，移动设备的默认viewport为980px或者1024px.
iphone 980
iPad 980
Android 980
Chrome 980
Opera 980
BlackBerry 1024
IE 1024
移动设备上，有三个viewport:
layout viewport
浏览器默认的大小viewport。可以通过document.documentElement.clientWidth获得。
visual viewport
浏览器可视区域大小。默认情况下，小于layout viewport。可以通过window.innerWidth获得。
ideal viewport
这个是完美匹配移动设备的viewport: > 不需要缩放和滚动可以正常显示； > 显示文字的大小是合适
不同设备的ideal viewport不同。 iphone的ideal viewport都是320。安卓手机中比较复杂，一般在320-384间（参考）。
meta
移动设备默认的viewport是layout viewport，所以人为控制得到ideal viewport。于是下面代码出场：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> // 当前viewport宽度等于设备的宽度，不允许缩放
meta viewport的属性：
width : 设置layout viewport的宽度，可以设置为整数（像素），或者为'width-device' initial-scale : 页面初始缩放值 minimum-scale : 用户最小缩放值 maximum-scale : 用户最大缩放值 height : 设置layout viewport user-scalable : 是否允许缩放
target-densitydpi原为安卓设备支持，表示设备的密度等级，用来决定css中的1px代表多少物理像素。值可以为high-dpi, medium-dpi, low-dpi, device-dpi。当target-densitydpi=device-dpi时，css中的1px等于物理像素中的1px。
这儿需要注意的是，缩放是相对于ideal viewport进行缩放的。因此，
<meta name='viewport' content='initial-scale=1'> // window phone上的ie无论横竖屏得到的都是竖屏时ideal viewport。
和
<meta name='viewport' content='width=device-width'> //iphone与ipad无论横竖屏都是竖屏时ideal viewport.
具有同样的效果，都使当前viewport为ideal viewport，不过都存在着不足。所以需要一起用。可以完美得到ideal viewport:
<meta name='viewport' content='width=device-width, initial-scale=1'>
还有一种情况需要了解的是，当width设定的宽度值与initial-scale=1设定的ideal viewport不一致时，采用偏大的值。
//initial-scale得到的ideal-viewport为320时候，那最终ideal-viewport为400.
缩放
由于随访是相对于ideal viewport，缩放值越大，viewport宽度就会越小。initical-scale=2时，原ideal-viewport 320的宽度则变为160.
缩放值 = ideal viewport / visual viewport/
但是安卓机器上的ie则会忽略其他值，initial-scale只为1。而webkit浏览器只有initial-scale=1才会表现正常。
另外，忽略安卓机器，iphone与ipad的默认缩放为：
缩放值 = ideal viewport / visual viewport
缩放值 = 320 / 980
最后，了解以上后，开发时候需要的就是。设计稿则可以直接为320，也可以为640然后缩放后进行适配。
本文严重参考：