js取得瀏覽器和螢幕的各種寬度高度

一：網頁可見區域寬高，不包含工具列與捲軸（瀏覽器視窗視覺區域大小）

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文件的標籤，所以也可表示為：

document.body.clientHeight：表示HTML文件所在視窗的目前高度；

document.body.clientWidth：表示HTML文件所在視窗的目前寬度；

#結論：

document.body.clientWidth/Height：的寬高偏小，高甚至預設200；

document.documentElement.clientWidth/Height 和window .innerWidth/Height 的寬高始終相等。

所以不同瀏覽器都實用的的Javascripit方案：

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

二：網頁內文全文寬高

scrollWidth和scrollHeight取得網頁內容高度和寬度

1.針對IE.Opera：scrollHeight是網頁內容實際高度，可以小於clientHeight ;

2.針對NS.firefox：scrollHeight是網頁內容高度，不過最小值是clientHeight;也就是說網頁內容實際高度小於clientHeight的時候， scrollHeight返回clientHeight;

3.瀏覽器相容程式碼：

##

var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;

# #二：網頁可見區域寬高，包括捲軸等邊線（會隨視窗的顯示大小改變）

#1.值：

   offsetWidth = scrollWidth + 左右滾動條+左右邊框；　　　　offsetHeight = scrollHeight + 上下滾動條+ 上下邊框；

2.瀏覽器相容代碼：

var w = document.documentElement.offsetWidth || document.body.offsetWidth ;
var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

三：網頁捲去的距離與偏移量

1 .scrollLeft:設定或取得位於給定物件左邊界與視窗中目前可見內容的最左端之間的距離；

2.scrollTop:

設定或取得位於給定物件最頂端與視窗中目前可見內容的最左端之間的距離；

###3.offsetLeft:######設定或取得位於給定物件相對於版面或由offsetParent屬性指定的父座標的計算左側位置；#############4.offsetTop:######設定或取得位於給定物件相對於版面或由offsetParent屬性指定的父座標的計算頂端位置；################更多js取得瀏覽器和螢幕的各種寬度高度相關文章請關注PHP中文網！ ############