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

media

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

1. <script type="text/javascript">
     ?, u) @2 X4 y# a
2. <!--
   8 o  E% s! I7 u
3. 
   
4. var viewportwidth;
   
5. var viewportheight;
   
6. 
   ! Y' [4 l, K- S
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   * n4 f7 S  W) V) @* Z
8. 
   - a8 x! [2 @1 Y( h1 j& d' J
9. if (typeof window.innerWidth != 'undefined')
   % r/ o* e* f, E5 u; P8 @& M
10. {
    
11.       viewportwidth = window.innerWidth,
    
12.       viewportheight = window.innerHeight
    
13. }
    , z* Y; t& `# T4 x1 h1 U
14. 
    4 Z8 ?4 `$ g# u# L
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'
    
18.      && typeof document.documentElement.clientWidth !=
    
19.      'undefined' && document.documentElement.clientWidth != 0)
    
20. {
    + l& q/ M( I. V; i4 n
21.        viewportwidth = document.documentElement.clientWidth,
    + K# d1 }$ q, ^& Z* S6 D' U
22.        viewportheight = document.documentElement.clientHeight
    
23. }
    
24. 
    
25. // older versions of IE
    2 e3 @) Y" X3 k, I% W: N, i
26. 
    
27. else
    
28. {
    4 A( o* @1 X2 ]& d% Y
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
      ^# v$ y7 `+ k% W$ o
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    % [9 g5 r* e& |/ @$ q# d
31. }
    
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    % g4 M5 o; s! W- u" b1 G
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果


來源: Get viewport size (width and height) with javascript
% {3 \; A" ^" |( D: K. P' t$ [
, ]7 i9 ]) w3 x! H; w; J' L2 j
' }6 [4 ~' c* F