取得目前可見視窗內容的尺寸--Javascript[含1張圖]

media

; L3 q* z! n- A" x7 Y% `" Y8 ]
) b, h7 j# U0 k' E1 L最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。

1. <script type="text/javascript">
   & U8 q* `# R0 j: q0 @6 B3 [, d4 _
2. <!--
   ; H+ B, G& }- K9 Q  S: j1 f
3. 
   
4. var viewportwidth;
   7 U6 n- E: o+ N0 ]
5. var viewportheight;
   9 a: @9 h$ S$ [4 s) W. Z
6. 
   
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   
8. 
   
9. if (typeof window.innerWidth != 'undefined')
   
10. {
    % M0 y9 Q4 e5 x# m9 q7 W0 \2 H
11.       viewportwidth = window.innerWidth,
    
12.       viewportheight = window.innerHeight
    
13. }
    
14. 
    
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    
16. 
    4 n0 ^& N  Y( c: ^% F. S
17. else if (typeof document.documentElement != 'undefined'
    - Y+ q, N& l$ x$ O- A6 s4 `
18.      && typeof document.documentElement.clientWidth !=
    5 P( T7 `! a3 I" Q, q, x
19.      'undefined' && document.documentElement.clientWidth != 0)
    / X- H) [4 i2 x. }0 r9 i5 Y
20. {
    
21.        viewportwidth = document.documentElement.clientWidth,
    
22.        viewportheight = document.documentElement.clientHeight
    ' t6 V7 `, g. t
23. }
    
24. 
    9 J3 D& S& A# C
25. // older versions of IE
    
26. 
    4 K( c" [3 }6 B$ L9 y8 n0 E" k4 f
27. else
    " \" l9 d; Z% Q0 A% ?8 G4 y
28. {
    9 c8 z" ^" x; Z9 f- i" \# u: i
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    2 V- k" ^1 \# r9 J  A# z# B
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    . T2 ~9 _7 C6 v- Z* Y  N
31. }
    / l/ e. c9 K' `* E9 k0 N8 }
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果
6 G1 e* r2 D4 f3 }" B
1 w  X) @7 E. c8 d
* c+ [1 h, h3 H" n, s' `% k! c8 Z來源: Get viewport size (width and height) with javascript
3 c: w/ R7 G" s  V
/ v1 A: f3 H9 W+ l4 T
4 g9 {* O) ]5 n, `3 ?