WebKit的布局size与真实的屏幕size(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. 屏幕坐标系

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


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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值