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

media

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

1. <script type="text/javascript">
   + V/ _  \7 g6 X4 W% A
2. <!--
   
3. 
   
4. var viewportwidth;
   
5. var viewportheight;
   
6. 
   * H2 e, N4 a5 a
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   
8. 
   ! A* w+ b; a( w8 x0 b% Q6 C; r
9. if (typeof window.innerWidth != 'undefined')
   
10. {
    2 [. U5 p: `1 L4 o
11.       viewportwidth = window.innerWidth,
    
12.       viewportheight = window.innerHeight
    
13. }
    # \4 N$ b  f% X$ F7 L. I
14. 
    3 r' W! R. H0 V& ~
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    
16. 
    4 V. z: q, U6 W
17. else if (typeof document.documentElement != 'undefined'
    2 v/ E$ A+ J7 w5 P% Z6 ^
18.      && typeof document.documentElement.clientWidth !=
    ( l, `4 o8 v" k2 h* ]7 P& w' J' e
19.      'undefined' && document.documentElement.clientWidth != 0)
    
20. {
    
21.        viewportwidth = document.documentElement.clientWidth,
    9 O5 Q7 J* V3 t9 }( l
22.        viewportheight = document.documentElement.clientHeight
    - r# b7 y+ e5 I- V$ N: r5 q* H/ ]4 l, ]
23. }
    
24. 
    
25. // older versions of IE
    , H6 ~7 U  T/ A+ k8 ?6 ^, y/ Y
26. 
    . ]- Y& q+ B! C! D& r4 h
27. else
    
28. {
    + s! q. [1 x: T. A( H
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    & U+ @4 p- \- C, F
31. }
    
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    ( W- G6 B1 H0 A
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果
8 H# M4 }% O( N( q) o: n/ {
* `2 J, Z5 y5 h) j
0 b6 \, I+ p" M" R$ r0 C7 V" o. `來源: Get viewport size (width and height) with javascript
2 r6 O# q. o0 B. h% y' }  @9 ?

6 S* M9 f0 p6 i' ]2 }