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

media

: z, D  O% C2 K5 t6 N最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。

1. <script type="text/javascript">
   
2. <!--
   6 x3 c3 v- E: \
3. 
   
4. var viewportwidth;
   
5. var viewportheight;
   
6. 
   
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   
8. 
   - Q1 F1 B, H+ g# ?) f  _
9. if (typeof window.innerWidth != 'undefined')
   ; U6 n: B& |. p5 |' T
10. {
    
11.       viewportwidth = window.innerWidth,
    
12.       viewportheight = window.innerHeight
      e+ q& P8 t' t" e
13. }
    5 z& j+ v$ r0 H3 h
14. 
    : c- S$ |/ {$ T/ x' s
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'
    5 D3 }$ w9 E1 b9 G: i' D5 ?
18.      && typeof document.documentElement.clientWidth !=
    " N) E; M# L% M! W7 \2 {
19.      'undefined' && document.documentElement.clientWidth != 0)
    9 U. e" z( Z+ t* s" k. i9 G; c
20. {
    " f$ d# _7 m3 z3 l
21.        viewportwidth = document.documentElement.clientWidth,
    
22.        viewportheight = document.documentElement.clientHeight
    - }: z7 Z) }3 D5 D
23. }
    ( W7 V) B" r, x1 F4 A6 g1 d! Y# L
24. 
    
25. // older versions of IE
    
26. 
    
27. else
    * `, x# B# d' M
28. {
    % h/ l' P5 z4 M; D9 x8 |
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    4 n9 t5 x! m& G3 m8 K$ Y, ^
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    
31. }
    ; a" K) L) t3 A3 h
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    " g3 w' h/ r7 P! M
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果
  j3 ~; z" O0 f) s- f
" ~* u% {" p1 k/ B4 r: H2 k
來源: Get viewport size (width and height) with javascript
3 h. s6 U6 D4 o3 z& n/ n  J

# H5 k4 z0 g0 x" H1 K& g0 r1 b, Q- o