1. 程式人生 > >瀏覽器窗口可視區域大小

瀏覽器窗口可視區域大小

設置 ble safari tle containe ava 指定 lpad 內部

一:網頁可見區域寬高,不包括工具欄和滾動條(瀏覽器窗口可視區域大小)

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 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.瀏覽器兼容代碼:

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

二:網頁可見區域寬高,包括滾動條等邊線(會隨窗口的顯示大小改變)

1.值: offsetWidth = scrollWidth + 左右滾動條 +左右邊框;

    offsetHeight = scrollHeight + 上下滾動條 + 上下邊框;

2.瀏覽器兼容代碼:

?
1 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屬性指定的父坐標的計算頂端位置;

以上就是本文的全部內容,

瀏覽器窗口可視區域大小