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

media

最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。
: e% o: m/ U( ?  L, }/ f* U; g/ ?

1. <script type="text/javascript">
   
2. <!--
   ; K# T4 O9 r3 P* B, U* I% Z
3. 
   . U3 P! T- Q  J# i
4. var viewportwidth;
   
5. var viewportheight;
   
6. 
   
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   
8. 
   - N& O, f6 m# g8 U- g
9. if (typeof window.innerWidth != 'undefined')
   8 y1 N: b& c2 e$ v+ P4 T
10. {
    
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. 
    ) T  `3 S, M, o* i
17. else if (typeof document.documentElement != 'undefined'
    9 C+ O: i0 _% Z- Q5 F
18.      && typeof document.documentElement.clientWidth !=
    
19.      'undefined' && document.documentElement.clientWidth != 0)
    / T' D2 S$ J% [. x
20. {
    2 v' u, D% `0 g( J
21.        viewportwidth = document.documentElement.clientWidth,
    / t! ?! G; {6 T& j) ~, \
22.        viewportheight = document.documentElement.clientHeight
    
23. }
    ! A! @: V  Y+ A6 R0 ^6 G
24. 
    
25. // older versions of IE
    7 E% ^( U" b* S. ?
26. 
    & y: K& N$ S& F6 I2 R8 O4 f
27. else
    
28. {
      m1 N( R1 y, f! v8 n, t' J2 k
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    8 {; e/ c7 ?, ^/ y# e
31. }
    
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    * @3 @$ Q, X* y5 v% `( u
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果

2 m1 Z' W1 y1 z' G5 c
3 O7 ~; H# p% g# E* m' \來源: Get viewport size (width and height) with javascript

3 A1 e4 \2 y, R0 W+ Y) W1 |
) l3 l( i0 X1 n