不管是在写pc端还是移动端,我们总会遇到关于高度的问题。div元素高度,父级元素的高度,屏幕的高度,窗口的高度,可视范围的高度等等,每次都弄的晕头转向,然后接下来就是面向百度了,所以自己整理了一下,好好理解。
- 网页可见区域宽: document.body.clientWidth
- 网页可见区域高: document.body.clientHeight
- 网页可见区域宽: document.body.offsetWidth (包括边线的宽)
- 网页可见区域高: document.body.offsetHeight (包括边线的高)
- 网页正文全文宽: document.body.scrollWidth
- 网页正文全文高: document.body.scrollHeight
- 网页被卷去的高: document.body.scrollTop
- 网页被卷去的左: document.body.scrollLeft
- 网页正文部分上: window.screenTop
- 网页正文部分左: window.screenLeft
- 屏幕分辨率的高: window.screen.height
- 屏幕分辨率的宽: window.screen.width
- 屏幕可用工作区高度: window.screen.availHeight
- 屏幕可用工作区宽度: window.screen.availWidth
这是别人整理好了的,常用的为 document.body.offsetHeight和document.body.clientHeight ,两者的区别为一个包含边框的宽高,一个不包含,这是比较简单的,多看几遍,实操一下就能记住。
可以上都是在浏览器网页中用的,在移动端该如何去计算这些高度呢?
1、获取手机屏幕高度
获取屏幕的高度很简单,HTML自带了screen.height,直接就可以得到屏幕的整体高度,单位是px,物理分辨率值(不是HTML的逻辑分辨率)。
HTML5Plus里提供了plus.screen.resolutionHeight方法,也是屏幕高度,但这个值是逻辑分辨率的高度。
参考http://html5plus.org/doc/zh_cn/device.html#plus.screen
2、获取手机状态栏的高度
顶部状态栏比较复杂,如果webview设了全屏,那么状态栏高度就为0。
如果设置了沉浸式状态栏,状态栏透明了,虽然状态栏存在理论高度,但webview高度是全屏的。
plus.navigator.getStatusbarHeight();这个H5+api专门获取状态栏高度。
3、获取输入法的高度
在弹出输入法的时候,webview的高度会自动减少,留出来给软键盘,
所以输入法的高度 = 屏幕高度 - webview的高度 - 状态栏的高度
一般手机自带的输入法的高度厂商是默认的
4、获取webview的高度
虽然webview的getStyle可以得到webview的高度,但开发者如果不手动设置的话,默认值是100%,这个值对本文探讨的问题没有意义。我们需要px的物理高度。
在Android里通过如下js代码可以得到webview的高度:plus.android.invoke(plus.android.currentWebview(),"getHeight")
这是一段Native.js代码,由于Android的webview原生对象就有getHeight()方法,所以就可以直接这样调用。
当然webview原生对象还有很多方法属性都可以调,具体参阅[Native.js入门](http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/88)