一次性解决所有关于各种高度的问题

Posted 2020-11-29 xiaoyeya

不管是在写pc端还是移动端，我们总会遇到关于高度的问题。div元素高度，父级元素的高度，屏幕的高度，窗口的高度，可视范围的高度等等，每次都弄的晕头转向，然后接下来就是面向百度了，所以自己整理了一下，好好理解。

1. 网页可见区域宽： document.body.clientWidth  
2. 网页可见区域高： document.body.clientHeight  
3. 网页可见区域宽： document.body.offsetWidth (包括边线的宽)  
4. 网页可见区域高： document.body.offsetHeight (包括边线的高)  
5. 网页正文全文宽： document.body.scrollWidth  
6. 网页正文全文高： document.body.scrollHeight  
7. 网页被卷去的高： document.body.scrollTop  
8. 网页被卷去的左： document.body.scrollLeft  
9. 网页正文部分上： window.screenTop  
10. 网页正文部分左： window.screenLeft  
11. 屏幕分辨率的高： window.screen.height  
12. 屏幕分辨率的宽： window.screen.width  
13. 屏幕可用工作区高度： window.screen.availHeight  
14. 屏幕可用工作区宽度： 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)  

这属于归纳总结，我们并不需要把所有的东西全部存储在脑海里，只需要记到有此属性，会用即可!