取得目前可見視窗內容的尺寸--Javascript

media

$ U) F; n  o' T3 @
最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。
, f0 y+ X+ i3 n  e

1. <script type="text/javascript">
   
2. <!--
   
3. 
   9 M7 B/ \: Y% Q/ k, @' c+ E* N
4. var viewportwidth;
   
5. var viewportheight;
   
6. 
   
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   " k. @+ F% t$ R3 V
8. 
   
9. if (typeof window.innerWidth != 'undefined')
   9 e# _8 y- N1 I2 H1 Y% g* A+ Z
10. {
    % f! C, G! w; f0 ~) X' ]% C
11.       viewportwidth = window.innerWidth,
    * b5 Y3 N$ G2 _  m% o! W
12.       viewportheight = window.innerHeight
    
13. }
    
14. 
    
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    ' H  X5 A1 G) |( g2 u
16. 
    / N+ C+ D) n4 V
17. else if (typeof document.documentElement != 'undefined'
    
18.      && typeof document.documentElement.clientWidth !=
    5 e8 c- o# S5 Y! y0 H2 E
19.      'undefined' && document.documentElement.clientWidth != 0)
    
20. {
    
21.        viewportwidth = document.documentElement.clientWidth,
    3 O+ X! ^" Q1 m! A8 H
22.        viewportheight = document.documentElement.clientHeight
    / K( T" r( z  z
23. }
    5 B, {  L% O" e# T4 K7 `8 `9 g
24. 
    8 ~3 |/ I1 l+ `( f  d4 s/ o3 Z
25. // older versions of IE
    4 N1 Z; j! V# }/ s: F
26. 
    
27. else
    + l/ G* f" m- ]6 f1 v4 L0 {
28. {
    8 h) E: J# W; Q0 x0 y
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    * {- C, L) ]7 O8 z/ g( m8 S
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    8 ?, ^, Z4 f: A" \' U
31. }
    
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    - y" f% D+ o: ?6 @* s, F4 p- c# f
33. //-->
    : F0 I- _/ a. j& V
34. </script>

複製代碼

結果: 在google chrome 顯示結果


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

2 N  t+ T! d" t1 b9 q* @6 c
9 z0 K& d# D/ e) e