移动端学习
以下是三个技术博客 链接，未来复习时重点再看，本文是一次学习笔记。
参考1 http://www.cnblogs.com/2050/p/3877280.html
参考2 http://www.quirksmode.org/mobile/viewports.html
参考3 http://www.quirksmode.org/mobile/viewports2.html
这篇文章是有关尺寸的，各种width，pixel的一次深入探索。
竟然发现自己以前理解的知识，不仅是浅的，而且还是不对的。
移动端前端开发，小显示器带来了很多东西：
先来点基础知识：
1 font-size 通常指大写的“M”的宽度。
设置了Font-size 之后，它会被用来计算em 和 ex; 1ex ≈ 0.5em ;
2 css pixel 和 device pixel
仔细看这篇文章 http://www.cnblogs.com/xiaohuochai/p/5494624.html
再结合 参考2 ，最后就会知道 搞清楚这两个概念的重要性。
我的小结：
（1）device pixel 是显示器的物理属性，基本上用不到，对应属性screen.width属性，measured in device pixels because
they never change: they’re a feature of the monitor, and not of the browser.
（2）css pixel 是逻辑概念，怎么理解呢？比如说，在一个页面中有一个div 元素，这个div 元素的高宽在css中规定： width : 100px;
这时候，CTRL + 滑轮 缩放页面，这个div 元素的宽度还是 100px 。
注意：参考http://ued.ourfuture.cn/fed/4200.html
手机的分辨率与逻辑分辨率。
设备独立/无关像素（dip/dp：device-independent pixel）：计算机坐标系统中的一个点，该点代表一个可由程序使用并控制的虚拟像素，然后由相关系统转换为物理像素。
不论是PC端还是移动端，通过screen.width获取的值是设备独立像素，而非设备的屏幕分辨率
3 viewport
3.1 pc 端
The viewport has the width and height of the browser window. The viewport is not an HTML construct, so you cannotinfluence it by CSS.
Viewport 是 measured in CSS pixels?应该是的
So document.documentElement.clientWidth and -Height always gives the viewport dimensions, regardless of the dimensions ofthe element.
大小 都是相对于 css pixel
the viewport is too narrow
移动端的layout viewport是以css pixel 计算的，并且不论zoom in/out ，旋转手机，都不会改变这个值。document.documentElement.clientWidth
但是对于visual viewport说，也是以css pixel 计算的，zoom in/out ，旋转手机，改变了页面的显示内容的宽度比例，因此会改变。 window.innerWidth 可以看到有多少CSS像素显示在手机上。
每个手机的逻辑宽度：
手机的设备像素宽度，dpr是不一样的，那么他们的CSS 宽度是多少：
6s:
5s:
Just as on desktop, document.documentElement.offsetWidth/Height gives the total size of the element in CSS pixels.那么有个小问题，这是layout viewport吗？document.documentElement.clientWidth and -Height contain the layout viewport’s dimensions.
很明显html的长度是整个页面的长度必须的长，而layout viewport 怎么说都是一个viewport ,只是一个窗口。
4 pc端 window.innerWidth （measured in CSS pixels）
总结来说，window.innerWidth的改变有两种方式，一是改变浏览器窗口大小；二是缩放浏览器窗口；
pc端：
图转自 http://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window
但是上面的图并不能说明全部，真正理解，还得搞明白一些原理：
首先得知道viewport的意义：
document width(in CSS pixels)
document.documentElement是 element，是所有HTML元素的根元素
viewport is one level higher, so to speak; it’s the element thatcontains the <html> element.