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

media

5 t- U% v  u' ?8 y1 W
最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。
- W0 |' X4 l, E/ ]+ I( B1 }

1. <script type="text/javascript">
   / ^- d( ]$ T; _" I- E6 c
2. <!--
   & D  b5 x* S2 S! V" F, r* W2 Y
3. 
   3 y6 B% d5 o5 C' h$ }
4. var viewportwidth;
   
5. var viewportheight;
   
6. 
   4 N3 c0 B' D8 x1 C- ]5 o, o( X- y
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   
8. 
   
9. if (typeof window.innerWidth != 'undefined')
   
10. {
    
11.       viewportwidth = window.innerWidth,
    5 r) m1 i1 S8 J! A& a  Q8 z
12.       viewportheight = window.innerHeight
    
13. }
    
14. 
    , e) o: \+ q# {% {& F
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 !=
    , u6 A( V' S, s, X; |: H# @
19.      'undefined' && document.documentElement.clientWidth != 0)
    8 ^7 }$ m$ U3 I2 R, ]1 f* k
20. {
    
21.        viewportwidth = document.documentElement.clientWidth,
    ( Z! p$ e% w: z. |- J
22.        viewportheight = document.documentElement.clientHeight
    $ Z" Y( x: R2 ^( w
23. }
    " O2 o5 E$ P- l; _' V
24. 
    
25. // older versions of IE
    
26. 
    
27. else
    
28. {
    
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    $ ^3 D' w" V3 E+ o; k9 A
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    3 U3 V+ X. d! \7 Q3 ^
31. }
      H$ z+ _- J$ h+ d" X! H: J
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果


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

* L( k/ P5 ^2 r% ~8 c' D0 `' n