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

media

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

1. <script type="text/javascript">
   4 s& ?# m+ S8 J/ [; D# x
2. <!--
   
3. 
   8 B) `& k- t5 X) v* l0 D! z
4. var viewportwidth;
   
5. var viewportheight;
     B. P4 ?5 |% b" r2 n! @! [
6. 
   ! z+ i1 r2 }6 `2 T$ d- u; M6 q
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   
8. 
   
9. if (typeof window.innerWidth != 'undefined')
   9 a7 C3 m' f; k* s: b. J
10. {
    
11.       viewportwidth = window.innerWidth,
    ( C5 x! r. P3 O( ?/ _4 Q2 K
12.       viewportheight = window.innerHeight
    % p% u* g/ q; ~- `
13. }
    
14. 
    
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
      y2 k# h* K4 |# c; f( H3 `# P
16. 
    / C: P0 M/ b# Z1 X
17. else if (typeof document.documentElement != 'undefined'
    $ l. L2 i0 F* S2 G5 o6 v8 i
18.      && typeof document.documentElement.clientWidth !=
    
19.      'undefined' && document.documentElement.clientWidth != 0)
    
20. {
    % ]: N, z  z# d3 m2 B+ u: j4 c
21.        viewportwidth = document.documentElement.clientWidth,
    7 p& C8 h* ]; y, \$ E! a
22.        viewportheight = document.documentElement.clientHeight
    
23. }
    1 c. M- ^/ u% f- L  T1 A4 @4 c
24. 
    
25. // older versions of IE
    3 r% P: B# l& |& ^) R$ ^
26. 
    
27. else
    
28. {
    4 w* B8 [3 o9 M8 u
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    + e& L9 K2 w; ^, a
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    + ^; Z. f) |3 m, {5 m2 X
31. }
    
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    7 [4 M; m" G4 y4 d, V0 G
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果


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