了解你的屏幕
做移动开发时，我们常常需要了解展示内容的设备的尺寸。衡量方式之多，如screen.width, window.outerWidth/innerWidth, document.body.clientWidth, @media device-width...令人眼花缭乱。
那么，他们都有何种特殊意义，在各种设备上是否表现一致？
首先你需要清楚viewport，然后再去探索各种width/height。
James Pearce在First, Understand Your Screen一文给出了一些评测，文章写于2011年12月，所测机型有些老旧，但是方法很值得学习。依此，我们可以对现有机型做些调查，并检测该结果是否依然准确TODO。
该文分别在3种HTML document types（HTML5， XHML-MP, no specified），2种操作系统（ios, android）,2种屏幕（横屏竖屏），2种宿主环境（浏览器，APP内）间条件组合进行检测。
我主要总结下操作系统和宿主环境两个因素得到的结果，而所有因素的结果在此。
screen.width
在pc浏览器，该属性指代的是电脑桌面的尺寸，与浏览器窗口的缩放无关。而在移动设备上，得到的是屏幕物理尺寸。（以通用竖屏320横屏480为例）
但是，有一个但是，
android v2.3中，最先值为800（好像是virtual vieport WTF），dom ready后，值为320。
ios在横屏情况下，却依然返回320。
因此，在dom ready后，该属性在各机器中表现一致。
window.innerWidth/outerWidth
window.outerXxx指的是浏览器窗口的尺寸，而非电脑桌面，与screen.width相反。window.innerXxx则指代的是除去工具条，状态条等之外，浏览器展示网页区域的尺寸。 在pc浏览器中，我们可以认为innerXxx <= outerXxx。
但在移动设备上，完全不是那么回事儿！
inner刻画的是viewport像素 outer刻画的是物理像素 ？？？
后者可以使手机浏览器能智能地缩放为大屏幕设计的网页。
如果我们限制viewport，并将其设置成与物理像素1:1的关系，通过<meta name="viewport" content="width=device-width">，那么得到的inner == outer == 物理像素。
但如果我们没有限制viewport,那么innerWidth最开始取自渲染页面的viewport canvas，要比物理屏幕大很多。iphone上是980，android4.0之前是800,之后是980。
实际遇到的那个bug
body.offsetWidth, .clientWidth
逃离实现不一的BOM，我们来看下Javascript API, 一心期望DOM级别能表现一致，但得到的结论是，这两个属性在移动设备上的表现更诡异。
不过还是来看下原意，offsetWidth指的是包括content, padding, border的body这个DOM的尺寸，clinetWidth则只包括content, padding，二者都不算margin。