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

media

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

1. <script type="text/javascript">
   
2. <!--
   
3. 
   , C0 m  H; N- Z5 E; Y+ F
4. var viewportwidth;
   
5. var viewportheight;
   ' I+ e7 l) m/ m+ x( h, D; Z
6. 
   / m. ], K7 J7 A4 I4 D: h
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   ) M. D! k8 ^6 b/ C( M6 t$ X
8. 
   
9. if (typeof window.innerWidth != 'undefined')
   
10. {
    
11.       viewportwidth = window.innerWidth,
    8 v5 W1 a$ {- h$ F0 X  t* H/ p' J$ X
12.       viewportheight = window.innerHeight
    
13. }
    # Q+ c6 L$ Q- I: I
14. 
    
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    9 u; ~1 h: E: U3 Z4 n3 E- T
16. 
    ( [6 k4 j' l% H" Z- h
17. else if (typeof document.documentElement != 'undefined'
    ) L) _+ p4 y% q' t0 j( x; t8 s
18.      && typeof document.documentElement.clientWidth !=
    
19.      'undefined' && document.documentElement.clientWidth != 0)
    2 g1 G9 k" @1 q
20. {
    $ I# f" x* ]* d7 M9 @0 b% r
21.        viewportwidth = document.documentElement.clientWidth,
    / ~& u1 r5 D1 v' k+ L+ R0 a. M
22.        viewportheight = document.documentElement.clientHeight
    - D- C7 u5 u, S3 G1 ]
23. }
    
24. 
    
25. // older versions of IE
    1 f7 s( X* z: o6 _6 m  p
26. 
    ; R7 T( G9 J; x) Z# P  g
27. else
    
28. {
    : u" \) w1 v. h# s$ n' H
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    - L" s2 C! u1 ^4 \5 U$ v4 L( l
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    ; I8 R8 }/ g$ K9 d( U  }! [
31. }
    
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    / Y- v& |- ?2 p7 ^5 H$ Z
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果

  ^4 c8 Q) n# b. z
來源: Get viewport size (width and height) with javascript

8 \# I5 S/ p4 b' A$ d0 l1 T2 d