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

media

6 A% v' }2 G  u, @% @. D& K9 V* {
最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。

1. <script type="text/javascript">
   ' Q" ~3 {. q' h- |& }
2. <!--
   . u7 O/ z& I) d/ `
3. 
   
4. var viewportwidth;
   ' Y: b9 o" |* C
5. var viewportheight;
   
6. 
   ) @& ?3 o8 L! [9 B* @
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   ; ^7 p( J& W- H5 P
8. 
   & ?" d( U: K2 P9 |4 J/ s, {6 ?1 L
9. if (typeof window.innerWidth != 'undefined')
   * i) p6 A& F8 a3 X% M, o! z
10. {
    % a) G9 |0 k" O2 _4 r4 P8 d- y
11.       viewportwidth = window.innerWidth,
    
12.       viewportheight = window.innerHeight
    / q9 D  U  `& K- \8 E% m* n
13. }
    4 R; ^% T9 j% G% H" [8 O' N7 E* W
14. 
    ; |$ j, G, M7 F- ^5 G
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    % Y1 e8 H6 [& e3 u) K3 y3 z3 j
16. 
    
17. else if (typeof document.documentElement != 'undefined'
    
18.      && typeof document.documentElement.clientWidth !=
    
19.      'undefined' && document.documentElement.clientWidth != 0)
    6 j! O! d( V- g; f; F2 n
20. {
    , m4 U3 Q; ]& t! a0 O+ D  P: A
21.        viewportwidth = document.documentElement.clientWidth,
    
22.        viewportheight = document.documentElement.clientHeight
    9 }% @. P% \1 I4 o  B3 l7 x
23. }
    
24. 
    5 `9 q' p) w! g" d1 u; j
25. // older versions of IE
    
26. 
    
27. else
    
28. {
    
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    9 z  R2 [1 M* @9 n
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    
31. }
    9 z9 I( s- ?, p7 S6 v
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    - P: o0 k$ k+ b  d" x2 v; j
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果


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

. e& M& ^! P' D
' P( C5 R+ q2 G7 Q: n