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

media

1 _: y' y- t# A. k7 W
最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。
3 n* B& W- C( K, c! ~

1. <script type="text/javascript">
   
2. <!--
   5 n/ \* {9 U) _) K
3. 
   # J, B7 K% W9 U7 w
4. var viewportwidth;
   
5. var viewportheight;
   7 U5 a" w9 t- e
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. {
    
11.       viewportwidth = window.innerWidth,
    : K7 ]: \5 I3 b2 a( \( q
12.       viewportheight = window.innerHeight
    : ^" M6 n0 s( x5 b) T
13. }
    
14. 
    
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    , S0 C+ l; n- K2 e6 G
16. 
    9 K# t1 d! O/ J) J
17. else if (typeof document.documentElement != 'undefined'
    - O/ |$ X4 m8 k2 C, T  h
18.      && typeof document.documentElement.clientWidth !=
    
19.      'undefined' && document.documentElement.clientWidth != 0)
    
20. {
    / y9 Z" c7 _4 |. Q5 S, l
21.        viewportwidth = document.documentElement.clientWidth,
    
22.        viewportheight = document.documentElement.clientHeight
    1 \9 z" L5 T0 q3 [: V( Q8 W7 W" j7 d
23. }
    ; z4 c" g6 }6 h8 F0 T! D: h+ C
24. 
    
25. // older versions of IE
    
26. 
    2 M+ \9 _+ {, V4 Y  Q! c& C4 h# l
27. else
    . Y3 ]/ @8 U2 N& h$ J# E# C3 ^+ Z
28. {
    2 Q- Y$ W5 _9 x2 m$ U; f
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
      c( ^* I9 B1 B7 C8 `6 n
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    
31. }
    
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    7 ^5 i1 v; Z5 T! b* q  V' P. K
33. //-->
    4 I* B' ~1 [! q) A! j
34. </script>

複製代碼

結果: 在google chrome 顯示結果
! Y, \, o4 A( A5 w+ E1 M

來源: Get viewport size (width and height) with javascript
/ _7 m1 `2 p% ~9 }" ?5 K