在做移動端頁面的時候，經常會遇到需要獲取屏幕的高度和寬度，進行一些特殊效果的處理或者兼容。比如在做全屏滑動上下翻頁的效果（不出現滾動條），這種就需要頁面加載時獲取到屏幕的高度，然后才能定義，每一屏的高度。以前做pc頁面時，才會說這個高度的獲取會有兼容問題，clientHeight、offsetHeight 和scrollHeight的各種討論和兼容處理已經很多了。但是在移動端，主要還是考慮webkit內核，那應該不存在這種兼容問題的啊！
但事實並非如此，在移動端設備上同樣因為有各種瀏覽器，對上面獲取高度的解析不一樣，導致獲取的高度不一致的問題。
后來我們發現，我們上面三個方法都是基於document下的元素的，比如document.body.clientHeight、document.body.offsetHeight、document.body.scrollHeigh；我們忽略了一個window的方法：innerHeight，所以准確的說我們獲取屏幕高度的方法有四個。
我們這里的測試條件是，假如頁面沒有滾動條，都是一屏內容（因為我們經常是在做那種滿屏滾動的專題頁面才需要獲取屏幕高度），系統是IOS8.1，瀏覽器包括Safari、chrome、UC、QQ、微信內部。
這里說一下我的測試結果（iPhone5）
Safari
alert(document.body.clientHeight);//460 alert(document.body.offsetHeight);//460 alert(document.body.scrollHeight);//460 alert(window.innerHeight);//460
chrome(chrome是沒有底部工具條的)
alert(document.body.clientHeight);//504 alert(document.body.offsetHeight);//504 alert(document.body.scrollHeight);//504 alert(window.innerHeight);//504
UC
alert(document.body.clientHeight);//504 alert(document.body.offsetHeight);//504 alert(document.body.scrollHeight);//504 alert(window.innerHeight);//460
alert(document.body.clientHeight);//500 alert(document.body.offsetHeight);//500 alert(document.body.scrollHeight);//500 alert(window.innerHeight);//452
微信內部(也是是沒有底部工具條的)
alert(document.body.clientHeight);//504 alert(document.body.offsetHeight);//504 alert(document.body.scrollHeight);//504 alert(window.innerHeight);//504
通過上面的數據分析，我們發現主要是UC和QQ在用這四種方法去獲取高度時，表現的數據是不一致的，所以如果我們使用前面三種（clientHeight、offsetHeight、scrollHeight）得到的高度去定義頁面的高度，在UC和QQ下，頁面的底部內容被底部的工具條遮擋住了，因為他們的的高度計算是忽略了工具條的存在。
所以這里建議，在手機頁面獲取屏幕高度時，盡量使用window.innerHeight，以最大的范圍兼容各種瀏覽器。
而對於安卓的機子，因為安卓系統版本比較多，我這里測試了安卓4.1以上的瀏覽器包括chrome、UC、QQ、微信內部，發現UC和QQ並沒有存在iOS上面的問題，四種方法獲取到的高度都是一致的！！終於發現安卓也有優勝的地方了~