WebKit的布局size与真实的屏幕size(webkit中的常见坐标系)
来源:互联网 发布:九寨沟 几月 知乎 编辑:程序博客网 时间:2024/04/26 09:24
对于移动浏览器来说,品类众多的设备带来了各异的屏幕尺寸、分别率等参数。使得网页想要适配不同的设备编程了一个噩梦。于是<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版本给出的结果是不一样的,有的给出的是排版宽度,有的给出的是屏幕宽度。
- WebKit的布局size与真实的屏幕size(webkit中的常见坐标系)
- WebKit的布局size与真实的屏幕size(webkit中的常见坐标系)
- -webkit-background-size的使用
- background-size:cover与-webkit-background-size
- CSS中的-webkit-text-size-adjust属性
- -webkit-text-size-adjust
- -webkit-text-size-adjust
- 网页字体缩放样式:-webkit-text-size-adjust的用法
- -webkit-text-size-adjust: none;
- 【转载】-webkit-text-size-adjust
- CSS-网页字体缩放样式-webkit-text-size-adjust的用法详解
- css3字体缩放样式-webkit-text-size-adjust的用法详解
- -webkit-box 与 -webkit-flex 的差异
- -webkit-box 与 -webkit-flex 的差异
- css3中-webkit-text-size-adjust详解
- css3中-webkit-text-size-adjust
- -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased
- webkit-touch-callout webkit- touch-select webkit-text-size-adjust border-collapse
- 如何在jsp中调用浏览器的打印功能
- tomcat6配置RealmJDBC
- 关于POI设置背景色的问题
- 基于jquery的treeTable树表组件
- 安卓系统手机常用命令大全
- WebKit的布局size与真实的屏幕size(webkit中的常见坐标系)
- struts2配置文件中constant标签属性
- windows下命令行模式中cd命令无效…
- python+ctypes枚举windows设备为XML树
- JVM源码下载
- MyEclipse8.0多款插件安装方法
- linux安装配置jdk1.5、tomcat5.5、eclipse3.2详解
- 动态规划初识
- 手机键盘