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

media

5 C( O! O' c" t/ ~" D最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。
- m+ T/ o' L4 t; Z7 y0 Q0 ^) ~5 e

1. <script type="text/javascript">
   # t+ `- b0 m1 n& Y% v
2. <!--
   
3. 
   9 |, ~* F) f3 i0 x: z
4. var viewportwidth;
   2 H( m5 H" F) ?: q' V' c5 y
5. var viewportheight;
   8 Z  l5 l5 o# _# e
6. 
   " L) o: X! \; E' a! O8 B
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,
    6 ]- o& H& k! Z* L) B- v2 s
12.       viewportheight = window.innerHeight
    9 X  V% V& F5 R. |
13. }
    
14. 
    / b! S, |# G8 c6 i! b+ f. m
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    
16. 
    # r6 F5 n; Z" }' y6 o( x3 b
17. else if (typeof document.documentElement != 'undefined'
    
18.      && typeof document.documentElement.clientWidth !=
    
19.      'undefined' && document.documentElement.clientWidth != 0)
    
20. {
    ; y$ X! D+ h( C9 w" ^4 w/ l% w  P
21.        viewportwidth = document.documentElement.clientWidth,
    
22.        viewportheight = document.documentElement.clientHeight
    
23. }
    4 s5 e* Y0 c' ^3 K2 i2 H8 [
24. 
    
25. // older versions of IE
    ( _  {" M( E  d% F9 H7 H' X
26. 
    ; K2 H2 M# g1 }1 D& \& L/ u# _9 S
27. else
    
28. {
    
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    
31. }
    , o  W4 P' O. z# a  H' }. K
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    ) V/ {; j4 x- J" C3 y
33. //-->
    0 x# C+ _( f* t) S/ ~
34. </script>

複製代碼

結果: 在google chrome 顯示結果


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

$ w" r9 S. Q( f" C  s4 Y% X
5 r* n, B; ?3 _% s1 m. c