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

media

. I1 y/ e9 y( }$ v% L3 Y
" |5 z1 p: Q3 }8 ^2 W. \9 h最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。
! T) v6 L' Z' f7 H# Q2 p4 a* {

1. <script type="text/javascript">
   / x& E' \& O- L, C$ F! u3 _
2. <!--
   
3. 
     _3 t! r4 J+ Z9 y
4. var viewportwidth;
   
5. var viewportheight;
   # ^4 j2 f+ `5 e3 O8 M. S5 l! ~) `
6. 
   ) V( A7 v  @1 J4 j! G1 T
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   9 w  j1 s5 s- w2 ^% k8 V' D! f
8. 
   
9. if (typeof window.innerWidth != 'undefined')
   
10. {
    * u1 n) D6 ]; w0 w( W+ ]
11.       viewportwidth = window.innerWidth,
    / _; F9 f0 Q7 {- I
12.       viewportheight = window.innerHeight
    4 Z# b+ ~: R" C4 t, S8 x2 D
13. }
    : `$ d- O0 ]2 C5 D* H
14. 
    
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    ( P! n3 X/ e: s$ M* p
16. 
    
17. else if (typeof document.documentElement != 'undefined'
    0 P" n- s; x9 p- r
18.      && typeof document.documentElement.clientWidth !=
    
19.      'undefined' && document.documentElement.clientWidth != 0)
    0 q0 w, l  G5 P. j
20. {
    
21.        viewportwidth = document.documentElement.clientWidth,
    & p. A8 C$ K2 ]3 ?+ R. M
22.        viewportheight = document.documentElement.clientHeight
    : Z1 N2 T+ N. P& _
23. }
    
24. 
    
25. // older versions of IE
    : j; t8 S  ^2 C; v- F5 z
26. 
    
27. else
    # r* A; h2 _6 u% l
28. {
    
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    : {, ?  T$ e4 W1 Y6 r4 C
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    
31. }
    , F# {% A4 w4 X* @) F! t
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    - a& I7 o( {( |: R
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果


% @, O* C) f( L) I* t來源: Get viewport size (width and height) with javascript