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

media

tid=159&
0 N. w; r. {' R4 w+ N" K* ]8 [3 J
最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。
" ^# t% e/ `, P

1. <script type="text/javascript">
   2 ]8 G" y+ o/ \9 ^
2. <!--
   
3. 
   ; I( ^6 j8 H# G$ ^
4. var viewportwidth;
     Q$ c5 E+ ~4 L( f9 Y7 Q: x
5. var viewportheight;
   9 ]: v3 p8 Y7 ^0 j$ Q+ \; Z
6. 
   
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
     b" }, M  g! s3 L8 C
8. 
   
9. if (typeof window.innerWidth != 'undefined')
   
10. {
    
11.       viewportwidth = window.innerWidth,
    % A1 d9 |/ b. U0 |+ N
12.       viewportheight = window.innerHeight
    
13. }
    9 Q# ]" c( ?0 X6 \3 n4 P0 a
14. 
    
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    ) N3 I# a" k3 g' d! a( `) R1 {% V
16. 
    ( ^( t0 E7 _6 _3 H
17. else if (typeof document.documentElement != 'undefined'
    
18.      && typeof document.documentElement.clientWidth !=
    
19.      'undefined' && document.documentElement.clientWidth != 0)
    8 o1 @: _; [0 v) Q
20. {
    
21.        viewportwidth = document.documentElement.clientWidth,
    
22.        viewportheight = document.documentElement.clientHeight
    $ z8 v$ J0 j# M% B3 l" E/ m
23. }
    ! f) f- Q9 N4 W# g) f
24. 
    7 c5 `& Y; d/ R- b
25. // older versions of IE
    + ]! o9 m$ t7 U! H  W
26. 
    2 _0 a' O* @6 j9 U) D' o
27. else
    
28. {
    
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    + c* h5 [6 ~" A
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    
31. }
    
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    2 R! Q& i; K# S  G& f( i% ?
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果

- C+ V9 `; D2 `. ]- q# W7 g5 j5 d
來源: Get viewport size (width and height) with javascript

! |2 M- {) ~; P. A0 u
3 x: h. [9 g0 V+ D: B