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

media

/ Y  U6 w; |4 d* L, y* N: l" ~
最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。
7 B: `1 P5 }9 I' M9 A

1. <script type="text/javascript">
   : ~* p% v% C' {! W7 L& U" F
2. <!--
   
3. 
     O: q# F7 Q: @' c8 J
4. var viewportwidth;
   
5. var viewportheight;
   ' b0 P! ^$ D$ a/ _0 d
6. 
   
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   
8. 
   5 p3 A: \+ ?  d
9. if (typeof window.innerWidth != 'undefined')
   : d, o4 k1 U6 n, W! A, P; c
10. {
      b: Q5 g* a3 Y% x* R
11.       viewportwidth = window.innerWidth,
    $ R- P6 m8 k9 G; t$ E2 o
12.       viewportheight = window.innerHeight
    6 F& P, ^2 r6 p) w
13. }
    ! R* x. A* Z& X; W0 E
14. 
    
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    
16. 
    
17. else if (typeof document.documentElement != 'undefined'
    
18.      && typeof document.documentElement.clientWidth !=
    6 Z) s' u- K6 ?! J
19.      'undefined' && document.documentElement.clientWidth != 0)
    
20. {
    4 M* Y! b3 w+ }& U7 `+ V5 {
21.        viewportwidth = document.documentElement.clientWidth,
    % I1 N, P8 ?* y
22.        viewportheight = document.documentElement.clientHeight
    
23. }
    
24. 
    6 E; G) d) V* Z! T! O( m2 U% T( B
25. // older versions of IE
    % Q, ?/ K0 _" w& K/ A4 e
26. 
    " N: b* {- G: b7 V& U
27. else
    
28. {
    & {2 k7 ~, J' q7 {! J: a
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    " M6 ]* i, o7 B: U' T: o% b
31. }
    3 d: K7 S% F2 R5 F% h0 U
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    
33. //-->
    $ P8 i+ d1 ~0 n0 ~( I9 ~
34. </script>

複製代碼

結果: 在google chrome 顯示結果


來源: Get viewport size (width and height) with javascript