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

media

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

1. <script type="text/javascript">
   # Y: w  c& U2 A$ e1 H: @
2. <!--
   
3. 
   : ]4 M# T1 s3 a, J% k
4. var viewportwidth;
   
5. var viewportheight;
   
6. 
   ) X" k$ G6 Z) i7 d( u* [8 T
7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   1 i# Q6 ~2 [; B, {: W3 f
8. 
   ! O! N% p7 n$ I5 U8 b( Q# y1 c# u. j
9. if (typeof window.innerWidth != 'undefined')
   2 H+ V1 n2 a8 G) B$ ?
10. {
    ! m) a: ]0 ?# z" G) |
11.       viewportwidth = window.innerWidth,
    $ U2 D( j. j  ]8 U
12.       viewportheight = window.innerHeight
    
13. }
    
14. 
    6 x9 V" A/ {- G
15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    
16. 
    ; d/ h0 L( Q" ?# M
17. else if (typeof document.documentElement != 'undefined'
    
18.      && typeof document.documentElement.clientWidth !=
    
19.      'undefined' && document.documentElement.clientWidth != 0)
    
20. {
    
21.        viewportwidth = document.documentElement.clientWidth,
    : H9 f9 F3 U, f+ x  ?& e
22.        viewportheight = document.documentElement.clientHeight
    
23. }
    
24. 
    
25. // older versions of IE
    
26. 
    
27. else
    % b5 W# `  f1 ?$ F) L. g# f
28. {
    , Q. b, R& s& }* ?" p  k
29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    6 s9 p  c9 d7 @( y9 [
30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    1 B9 r9 C3 S- `; J" Y
31. }
    
32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    ( r+ t' k  f, M1 c8 v+ Y6 I, Z
33. //-->
    
34. </script>

複製代碼

結果: 在google chrome 顯示結果
: f2 B7 i  W1 F2 C( @

2 B. b+ R" w- m! p來源: Get viewport size (width and height) with javascript

* Y4 U- B# {3 D4 [
. F: B+ F6 P$ w1 Y0 {5 X