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

media

最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。

1. <script type="text/javascript">
   
2. <!--
   - ~- y- B5 C9 r. G8 M* x3 P; Z+ b
3. 
   
4. var viewportwidth;
   
5. var viewportheight;
   6 F8 y, J, K5 a: q& \1 O( ?1 j
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,
    
12.       viewportheight = window.innerHeight
    
13. }
    4 v6 q+ Q3 r6 h( K- T4 L
14. 
    3 m# p# F. T& F% \
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    
16. 
    ( W9 K7 N% C2 b: H" u& g6 R7 K+ H
17. else if (typeof document.documentElement != 'undefined'
    8 A. h( {& v( d# h, f/ u; i
18.      && typeof document.documentElement.clientWidth !=
    
19.      'undefined' && document.documentElement.clientWidth != 0)
      ^3 G, [2 X- ]  j
20. {
    
21.        viewportwidth = document.documentElement.clientWidth,
    ' ]8 l' `3 O) m- U
22.        viewportheight = document.documentElement.clientHeight
    
23. }
    
24. 
    3 ~/ r1 r) R3 c/ _2 t: \
25. // older versions of IE
    * b; h4 J0 d: ?  l, Q* e* ?+ g
26. 
    3 N8 c* i2 ?+ U! f
27. else
    8 C) b2 U' x: D5 A+ k
28. {
    $ Z7 R- j/ x) J. |
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    # U, e' v& _1 D8 m0 K
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    6 m5 v" ]$ o9 l' _5 ?7 Y
31. }
    
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果
$ p6 z. r# B% T% ]
, g8 k4 |, k4 N) V4 G
) _3 f9 `; x6 a$ Q* ~. P0 y來源: Get viewport size (width and height) with javascript
" w" F& v5 a+ p7 c. X

8 _7 @! d2 s$ E' V$ B