js如何擷取浏覽器視窗的大小

js 擷取浏覽器視窗大小

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<code>// 擷取視窗寬度</code>

<code>if</code> <code>(window.innerwidth)</code>

<code>winwidth = window.innerwidth;</code>

<code>else</code> <code>if</code> <code>((document.body) &amp;&amp; (document.body.clientwidth))</code>

<code>winwidth = document.body.clientwidth;</code>

<code>// 擷取視窗高度</code>

<code>if</code> <code>(window.innerheight)</code>

<code>winheight = window.innerheight;</code>

<code>else</code> <code>if</code> <code>((document.body) &amp;&amp; (document.body.clientheight))</code>

<code>winheight = document.body.clientheight;</code>

<code>// 通過深入 document 内部對 body 進行檢測，擷取視窗大小</code>

<code>if</code> <code>(document.documentelement &amp;&amp; document.documentelement.clientheight &amp;&amp; document.documentelement.clientwidth)</code>

<code>{</code>

<code>winheight = document.documentelement.clientheight;</code>

<code>winwidth = document.documentelement.clientwidth;</code>

<code>}</code>

關于擷取各種浏覽器可見視窗大小: 

&lt;script&gt; 

function getinfo() 

{ 

var s = ""; 

s = " 網頁可見區域寬：" document.body.clientwidth; 

s = " 網頁可見區域高：" document.body.clientheight; 

s = " 網頁可見區域寬：" document.body.offsetwidth " (包括邊線和滾動條的寬)"; 

s = " 網頁可見區域高：" document.body.offsetheight " (包括邊線的寬)"; 

s = " 網頁正文全文寬：" document.body.scrollwidth; 

s = " 網頁正文全文高：" document.body.scrollheight; 

s = " 網頁被卷去的高(ff)：" document.body.scrolltop; 

s = " 網頁被卷去的高(ie)：" document.documentelement.scrolltop; 

s = " 網頁被卷去的左：" document.body.scrollleft; 

s = " 網頁正文部分上：" window.screentop; 

s = " 網頁正文部分左：" window.screenleft; 

s = " 螢幕分辨率的高：" window.screen.height; 

s = " 螢幕分辨率的寬：" window.screen.width; 

s = " 螢幕可用工作區高度：" window.screen.availheight; 

s = " 螢幕可用工作區寬度：" window.screen.availwidth;

s = " 你的螢幕設定是 " window.screen.colordepth " 位彩色"; 

s = " 你的螢幕設定 " window.screen.devicexdpi " 像素/英寸"; 

//alert (s); 

} 

getinfo(); 

&lt;/script&gt; 

在我本地測試當中： 

在ie、firefox、opera下都可以使用 

document.body.clientwidth 

document.body.clientheight 

即可獲得，很簡單，很友善。 

而在公司項目當中： 

opera仍然使用 

可是ie和firefox則使用 

document.documentelement.clientwidth 

document.documentelement.clientheight 

原來是w3c的标準在作怪啊 

&lt;!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"&gt; 

如果在頁面中添加這行标記的話 在ie中： 

document.body.clientwidth ==&gt; body對象寬度 

document.body.clientheight ==&gt; body對象高度 

document.documentelement.clientwidth ==&gt; 可見區域寬度 

document.documentelement.clientheight ==&gt; 可見區域高度 

在firefox中： 

? 

在opera中： 

document.body.clientwidth ==&gt; 可見區域寬度 

document.body.clientheight ==&gt; 可見區域高度 

document.documentelement.clientwidth ==&gt; 頁面對象寬度（即body對象寬度加上margin寬） 

document.documentelement.clientheight ==&gt; 頁面對象高度（即body對象高度加上margin高） 

而如果沒有定義w3c的标準，則 

ie為： 

document.documentelement.clientwidth ==&gt; 0 

document.documentelement.clientheight ==&gt; 0 

firefox為： 

document.documentelement.clientwidth ==&gt; 頁面對象寬度（即body對象寬度加上margin寬）document.documentelement.clientheight ==&gt; 頁面對象高度（即body對象高度加上margin高） 

opera為： 

document.documentelement.clientwidth ==&gt; 頁面對象寬度（即body對象寬度加上margin寬）document.documentelement.clientheight ==&gt; 頁面對象高度（即body對象高度加上margin高）

申明：本文轉自部落格園鳳痕部落格 

原位址 http://www.cnblogs.com/henw/archive/2011/12/19/2293585.html