js獲取瀏覽器和裝置相關寬度和高度
首先呢，我們將iPhone手機的相關資料表示如下
我們要理解很多東西，比如邏輯解析度、物理解析度、縮放因子、ppi等，這裡先不討論。
首先呢，我們先介紹下各個螢幕寬度：
網頁可見區域寬： 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
螢幕縮放因子：window.devicePixelRatio
螢幕邏輯解析度：window.screen.width * window.devicePixelRatio (縮放因子與物理解析度的乘積)
下面，我將分別在不同裝置上的演示後的結果截圖如下：
iPhone5
iPhone6
iPad
PC
那麼大家根據這些，多理解理解這些資料。
我們在移動端開發時，在<head>標籤中加入
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 這句話幫我們解決了很多問題，我們只要按照裝置物理畫素的大小來進行開發就行了。
***************************************************************************************************************************************************************************************關於相容**********************************************************************************************************
一：網頁可見區域寬高，不包括工具欄和滾動條（瀏覽器視窗可視區域大小）
1.對於IE9+、chrome、firefox、Opera、Safari：
window.innerHeight瀏覽器視窗的內部高度；
window.innerWidth瀏覽器視窗的內部寬度；
2.對於IE8.7.6.5:
document.documentElement.clientHeight:表示HTML文件所在視窗的當前高度；
document.documentElement.clientWidth:表示HTML文件所在視窗的當前寬度；
或者，因為document物件的body屬性對應HTML文件的<body>標籤，所以也可表示為：
document.body.clientHeight：表示HTML文件所在視窗的當前高度；
document.body.clientWidth：表示HTML文件所在視窗的當前寬度；
結論：
document.body.clientWidth/Height：的寬高偏小，高甚至預設200；
document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的寬高始終相等。
所以在不同瀏覽器都實用的的Javascripit方案：
|
1 2 |
|
二：網頁正文全文寬高
scrollWidth和scrollHeight獲取網頁內容高度和寬度
1.針對IE.Opera：scrollHeight是網頁內容實際高度，可以小於clientHeight;
2.針對NS.firefox：scrollHeight是網頁內容高度，不過最小值是clientHeight;也就是說網頁內容實際高度小於clientHeight的時候，scrollHeight返回clientHeight；
3.瀏覽器相容程式碼：
|
1 2 |
|
二：網頁可見區域寬高，包括滾動條等邊線（會隨視窗的顯示大小改變）
1.值： offsetWidth = scrollWidth + 左右滾動條 +左右邊框；
offsetHeight = scrollHeight + 上下滾動條 + 上下邊框；
2.瀏覽器相容程式碼：
|
1 2 |
|
三：網頁捲去的距離與偏移量
1.scrollLeft:設定或獲取位於給定物件左邊界與視窗中目前可見內容的最左端之間的距離；
2.scrollTop:設定或獲取位於給定物件最頂端與視窗中目前可見內容的最左端之間的距離；
3.offsetLeft:設定或獲取位於給定物件相對於版面或由offsetParent屬性指定的父座標的計算左側位置；
4.offsetTop:設定或獲取位於給定物件相對於版面或由offsetParent屬性指定的父座標的計算頂端位置；