移动浏览器中的那些尺寸

[xiangpaopao]

做移动端页面开发时，时常想获取一下浏览器尺寸啥的，一直对移动端screen接口把握不准，网上能看到的资料也不多，打算把这些内容整理了一下。

回顾桌面上的那些东西

首先回顾下在桌面浏览器中用到的接口，这里只是列出，具体了解建议阅读 CSSOM视图模式(CSSOM View Module)相关整理 与 w3c关于Cssom的文档翻译

window的接口的扩展

window.screenX
window.screenY
window.scrollX
window.scrollY
window.screenLeft
window.screenTop
window.innerHeight
window.innerWidth
window.outerHeight
window.outerWidth
window.pageXOffset
window.pageYOffset

screen接口

screen.height
screen.width
screen.availHeight
screen.availWidth
screen.availLeft
screen.availTop

HTMLElement接口的扩展

document.body.clientTop
document.body.clientLeft
document.body.clientWidth
document.body.clientHeight
document.body.scrollWidth
document.body.scrollHeight
document.body.scrollTop
document.body.scrollLeft
document.body.offsetWidth
document.body.offsetHeight
document.body.offsetParent

移动端一些概念

viewport

做过移动网页开发的对viewport这个概念不会陌生，他最早是Mobile Safari提出来的，用来把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中。要了解更多可以阅读Mozilla 开发者博客上的 在移动浏览器中使用viewport元标签控制布局

devicePixelRatio

提到viewport自然要提到devicePixelRatio这个概念，即设备像素比（设备上物理像素与设备独立像素的比例），如devicePixelRatio为2时，就表示用4个物理像素来显示一个页面像素。在浏览器中可以用window.devicePixelRatio获取到设备像素比，早期显示器的设备像素比都为1，后来随着手机屏幕分辨率的提升为了不改变浏览阅读体验移动设备就诞生了设备像素比这个概念。这个比值现在可能的值有很多1、1.5、2、3 ... 并且一些其他设备如MacBook也开始使用Retina屏了。一些设备的屏幕参数可以参考 http://screensiz.es/

对移动端有意义的接口

由于这些接口有些不在标准中，各浏览器的理解与实现也不尽相同，加上移动设备屏幕的局限性，所以一些接口在移动端上并没有多少意义。为此我用了几台机器做了如下测试，测试用的 demo地址

iPhone5

红米Note

三星Note2

Nexus4

三星9100

华为G525

可以看到 这些接口在iOS中的浏览器几乎没有兼容性问题，而安卓上的表现不太靠谱。

• window.devicePixelRatio这个没多少异议，在写webapp时这也是个重要的参考参数。
• window.innerHeight/window.innerWidth 是浏览器窗口的视口（viewport）高度/宽度，即去掉边框工具栏后实际显示区域，这个接口在iOS和安卓上的表现都很好。
• window.outerWidth/window.outerHeight 是整个浏览器窗口的高度/宽度，包括工具栏啥的。iOS中获取到的值都为0，安卓中有些机型获取到的是设备尺寸有些机型获取到的是物理尺寸，因此此接口不靠谱。
• window.screenX/window.screenY/window.screenLeft/window.screenTop 用来得到浏览器顶部距离系统左上角的距离。iOS中此接口返回值为0，而安卓中通过window.screenY/window.screenTop得到的值各种情况都有，有些是0有些是titlebar的高度，有些是statusbar + titlebar的高度....而且有些单位是设备尺寸有些是物理尺寸....
• screen.height/screen.width 得到的是屏幕高/宽，在iOS中得到的是设备尺寸，这样乘以一个devicePixelRatio就能得到物理分辨率。而安卓中也是存在有些机型获取到的是设备尺寸有些机型获取到的是物理尺寸的问题，红米Note中百度浏览器screen.height返回的竟然是721...呵呵
• screen.availHeight/screen.availWidth 是屏幕可用尺寸。具体设备上的表现和上条类似，不想说了。
• 最后测试的document.body.xxx 都是属于HTMLElement接口的扩展，经测试，用法与表现与桌面上类似，具体用法有疑问还是阅读 CSSOM视图模式(CSSOM View Module)相关整理 吧

总结下，移动端屏幕/窗口接口中唯独靠谱的就是 window.innerHeight/window.innerWidth 了，好在还有这个可以用...

[xiangpaopao]

以上仅供参考，后经实测安卓极少部分机型window.innerWidth取到的值也不准

[huixisheng]

是否可以考虑document.documentElement.getBoundingClientRect() ?

[xiangpaopao]

@huixisheng 当时对 document.documentElement.getBoundingClientRect() 方法了解不多 后来一些场景也用了这个方法

[bryanzhang0801]

1.是否可以用document..documentElement来测试，document.body的差异还是比较大的。
2. 在wkwebview里window.innerWidth缩放和旋转时会出现问题。

[fightingMie]

是不是使用document.documentElement会更有保障呢。。