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

media

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

1. <script type="text/javascript">
   2 _+ |9 j1 ~3 G
2. <!--
   ; j7 ^* N" w! M
3. 
   8 n7 I1 t& n+ r5 j" ]. Z8 c6 y
4. var viewportwidth;
   
5. var viewportheight;
   2 h5 U  B( ^/ k
6. 
   
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   
8. 
   , |1 e6 p, T, Q% J5 `
9. if (typeof window.innerWidth != 'undefined')
   - e9 H5 }. B# F& P3 u. D
10. {
    
11.       viewportwidth = window.innerWidth,
    1 P* Q1 @6 k+ Q  j
12.       viewportheight = window.innerHeight
    + N' W- `$ m2 ]# \4 K, A
13. }
    
14. 
    ; p: ~; M& g1 \9 v# ^5 z" v
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    
16. 
    ! B) o7 Q5 k8 p3 Y8 A( y0 l
17. else if (typeof document.documentElement != 'undefined'
    
18.      && typeof document.documentElement.clientWidth !=
    : ^( e& s+ u+ }* u" a4 p7 Y& N
19.      'undefined' && document.documentElement.clientWidth != 0)
    * ]& E& n$ [% {( v8 b
20. {
    ( B9 {" R' z( V
21.        viewportwidth = document.documentElement.clientWidth,
    
22.        viewportheight = document.documentElement.clientHeight
    $ M) z0 M3 ~, U3 w, q) P5 C
23. }
    
24. 
    ( c& a" M* T) j, P3 Q
25. // older versions of IE
    0 Q* `. K" u+ o2 i4 J
26. 
    7 Z( _; S. z  V7 Z0 d
27. else
    7 j- J7 F9 l5 n) c* {* x0 p
28. {
    
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    1 w" q* S6 k/ h
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    # T. T2 M8 U  U, F( g
31. }
    
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果

3 b6 i! e- q) F$ H- H
來源: Get viewport size (width and height) with javascript
; m; B4 Z8 ^4 f# y9 K
" p6 B* L8 p: W5 z
  h3 o* W" c. n