一、像素关系
物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
规定一个物理像素对应一个像素点
设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
注：在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。
设备像素比(device pixel ratio )：物理像素 / 设备独立像素
高清屏（retina）
就是在1px独立像素中容纳了更多的物理像素，将内容显示的更加清晰细致
理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。
在普通屏幕下是没有问题的，但是在retina屏幕下就会出现位图像素点不够，从而导致图片模糊的情况。
注释：如果在像素比为1的设备上，1px刚好对应1个像素点，内容会正常显示；在像素比为2（或者更高）的设备上，1px像素对应4个像素点或者（更多的）像素点，内容相当于放大显示可能会失真。此时应该将内容压缩对应的像素比才不会失真，但是尺寸又会变小。为了解决以上存在的问题，所以设计图要成倍放大设计。
对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：
1.首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×667)。
2.对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。
总结：移动端的高清显示也就是对应分辩率的显示，设备中的一个物理像素对应设计稿中的1pt.
二、viewport特性
viewport可以理解成一个虚拟的渲染页面的容器，不局限于设备的大小，可以比设备的可视区域大也可以小，也可以是个特殊的值device-width。
在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。
设置viewport后出现滚动条的两种情况：
- 设置的viewport比可视区域大会出项横向的滚动条，此时可以通过缩放viewport来达到取消滚动条的效果
- 设置viewport的宽度为device-width时，如viewport上的内容宽度超过viewport的宽度也会出现横向滚动条，同样可以通过缩放viewport来达到取消滚动条的效果，此时的viewport的实际宽度会缩的比device-width小
- 标准的pc页面在移动端展示：默认显示整个页面（会缩的很小）不带滚动条，但是用户可以缩放页面，放大出现滚动条。浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px或者1024px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了（会缩的很小）,此时viewport的宽度可以用document.documentElement.clientWidth（屏幕分辩率的宽度值）；
把这个浏览器默认的viewport叫做 layout viewport(布局视口)
2.我们还需要一个viewport来代表 浏览器可视区域的大小，把这个viewport叫做 visual viewport（视觉视口）。visual viewport的宽度可以通过window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。
浏览器的默认展示效果 类似！类似！类似！ 设置了：
scale = 视觉视口（设备屏幕有效宽度） / 布局视口;
scale = window.screen.availWidth（window.innerWidth设备屏幕有效宽度） / 980或1024;
<meta name="viewport" content="width=980或1024, user-scalable=yes, initial-scale="+scale+", minimum-scale=0" >
3.现在我们已经有两个viewport了：layout viewport 和 visual viewport。但浏览器觉得还不够，因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。把这个viewport叫做 ideal viewport，也就是第三个viewport——移动设备的理想viewport。
ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在iphone中，css中的320px就代表iphone屏幕的宽度。但是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等
ideal viewport（理想视口）可以通过meta标签设置
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
三、其实移动端的适配方案有很多
1.媒体查询
2.流式布局
3.视口动态变化
4.css3的scale（验证）
5.em,rem
四.最新版的适配
曾经的写法：
var screenWidth = window.screen.width;
var realWidth = screenWidth / 640 * 100;
var aa = document.getElementsByTagName('html')[0];
console.log(aa)
aa.style.fontSize = realWidth + "px";
现在的写法:
html {
font-size: calc(100vw*100/640);
}
参考资料：
http://www.aliued.com/?p=3166
http://www.cnblogs.com/2050/p/3877280.html
