WebKit的布局size与真实的屏幕size（webkit中的常见坐标系）

    对于移动浏览器来说，品类众多的设备带来了各异的屏幕尺寸、分别率等参数。使得网页想要适配不同的设备编程了一个噩梦。于是<meta name="viewport" content="...">标签横空出世，解决了这个难题。它的原理是根据设备的屏幕宽度和分辨率来动态设置webkit的排版尺寸，完成排版后放大至适应屏幕。

   进一步举例解释：

    WebCore中有默认的DPI定义：const float ViewportArguments::deprecatedTargetDPI = 160

    而屏幕也有其硬件DPI，假设为480，则两者之间有3倍的差值。

    在Page类中有2个变量来记录相关的差值。m_deviceScaleFactor即为3. m_pageScaleFactor（初始值） = m_deviceScaleFactor*（网页中的DPI因子）

    另外如果页面有人为的缩放操作，那么缩放因子也会反映到m_pageScaleFactor 变量上。m_pageScaleFactor = m_deviceScaleFactor*（网页中的DPI因子）*（缩放因子）

    假设屏幕的宽度为1080，在WebCore会按照1080/3 = 360 的宽度来排版，排版结束之后在放大3倍，以与屏幕适配。

    ScrollView::setFixedLayoutSize函数就是用来设在实际排版size的。

    与m_deviceScaleFactor和m_pageScaleFactor两个参数相对应的有两种坐标系。

    1 排版坐标系

    宽度 = 屏幕宽度 /  m_deviceScaleFactor

    这个坐标系主要在Render节点中应用，一般对于上层开发者是透明的

    2. 网页坐标系

    宽度 = 排版宽度 * m_pageScaleFactor

    这个坐标系一般在比较上层应用，比如上层得到的各种CSS位置属性，事件发生位置，滚动条位置等，都是经过变换后的网页坐标系

    3. 屏幕坐标系

    一种特殊的网页坐标系，以屏幕左上角为原点。这种坐标系一般只有屏幕物理设备使用。

   以上是针对移动网页来说的，也就是有<meta name="viewport" content="...">标签的网页。

   而对于没有该标签的网页来说，它的排版宽度就不会通过dpi来动态计算了，直接是一个固定数值，android4.1 browser中是由WebViewClassic类来设置的。这样它无论在哪种设备上，都按照同样的宽度来排版

    那么我们在网页中常见一句js代码，window.innerWidth，得到的什么宽度呢？很遗憾，不同的webkit版本给出的结果是不一样的，有的给出的是排版宽度，有的给出的是屏幕宽度。