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

media

0 ]: V* S+ Q! a; N7 i. p
最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。
6 s- E5 F( R2 ]2 ^2 N- b- \

1. <script type="text/javascript">
   4 {8 O" D) h' V. K$ _! b* W
2. <!--
   
3. 
   1 w& l+ x0 D1 L( j* f% M
4. var viewportwidth;
   
5. var viewportheight;
   4 V5 w# v9 p" U6 ^5 P  h
6. 
   ( n8 V- K4 i5 B$ Q9 ^$ G
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   7 F* w1 z/ x1 P
8. 
   
9. if (typeof window.innerWidth != 'undefined')
   7 f- h( f' L- h, _3 V
10. {
    . C. n3 g# K9 @0 F1 C
11.       viewportwidth = window.innerWidth,
    3 M8 P* G1 B2 i+ U( z
12.       viewportheight = window.innerHeight
    
13. }
    
14. 
    , I( Y: Q3 ?0 x* |2 V. U; J3 @. u
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    ' ^, g% v4 Q* j* d  M# P! Y
16. 
    8 O/ y7 f+ [% c# v5 Q7 x
17. else if (typeof document.documentElement != 'undefined'
    ) T1 K5 s! C4 }
18.      && typeof document.documentElement.clientWidth !=
    % w' z# n$ w0 t: M3 l+ {# I
19.      'undefined' && document.documentElement.clientWidth != 0)
    
20. {
    . d- R; M; c* U6 R  P1 A8 e
21.        viewportwidth = document.documentElement.clientWidth,
    & f& z0 f# k" Q( U3 G0 O4 {5 @
22.        viewportheight = document.documentElement.clientHeight
    ! j7 @4 n+ g. I5 F' h: \
23. }
    * D3 B$ Q, @! C( Y( T
24. 
    . p6 Q  i" A/ T, V
25. // older versions of IE
    
26. 
    
27. else
    $ D  K* ~# x- ?4 F3 x& j+ p
28. {
    5 O/ s$ W, ~* y+ p) R
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    " N* W2 H* j+ ^& X0 W+ i
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    : y& y8 f  ?! r$ U/ u% E& f- I
31. }
    
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    3 @: g+ E; ^; A, x+ O
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果
5 `) K* a: s3 ?4 y9 ]6 r' }" ~9 k5 A

來源: Get viewport size (width and height) with javascript
" f9 [# S# w: L$ a* ?7 R! j. c. M
  l; T; V1 Q% y" z4 L: F