一次性解決全部關於各類高度的問題

無論是在寫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  ，二者的區別爲一個包含邊框的寬高，一個不包含，這是比較簡單的，多看幾遍，實操一下就能記住。

能夠上都是在瀏覽器網頁中用的，在移動端該如何去計算這些高度呢？

一、獲取手機屏幕高度

獲取屏幕的高度很簡單，HTML自帶了screen.height，直接就能夠獲得屏幕的總體高度，單位是px，物理分辨率值（不是HTML的邏輯分辨率）。  
HTML5Plus裏提供了plus.screen.resolutionHeight方法，也是屏幕高度，但這個值是邏輯分辨率的高度。
參考http://html5plus.org/doc/zh_cn/device.html#plus.screen

二、獲取手機狀態欄的高度

頂部狀態欄比較複雜，若是webview設了全屏，那麼狀態欄高度就爲0。  
若是設置了沉浸式狀態欄，狀態欄透明瞭，雖然狀態欄存在理論高度，但webview高度是全屏的。  
plus.navigator.getStatusbarHeight();這個H5+api專門獲取狀態欄高度。

三、獲取輸入法的高度

在彈出輸入法的時候，webview的高度會自動減小，留出來給軟鍵盤，
因此輸入法的高度 = 屏幕高度 - webview的高度 - 狀態欄的高度
通常手機自帶的輸入法的高度廠商是默認的

四、獲取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)  

這屬於概括總結，咱們並不須要把全部的東西所有存儲在腦海裏，只須要記到有此屬性，會用便可!