52AV手機A片王|52AV.ONE

標題: 取得目前可見視窗內容的尺寸--Javascript [打印本頁]
作者: media    時間: 2014-12-10 17:42
標題: 取得目前可見視窗內容的尺寸--Javascript
本帖最後由 media 於 2014-12-10 19:08 編輯 5 V, B" V  b( \+ Q2 R
' y- h, \. ^1 c$ K+ D, V& @
最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。
: x5 @  g# N( D8 G. ^
  1. <script type="text/javascript">) Z; W' w+ z# @1 B  U7 v5 D
  2. <!--! p& c/ y# M+ f* D/ y

  3. , @. V( q; Y( o! f( X8 N) O% E& y
  4. var viewportwidth;# |' n7 @6 C, h6 [/ B- F! M
  5. var viewportheight;
    7 b4 d, i2 |0 C9 j2 O
  6. / B2 c! X$ ?5 v9 U7 ?$ S
  7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight- {6 C* d& C0 S. t) u, G
  8. : e% u9 j& f& N2 n% V+ Y( Q5 o
  9. if (typeof window.innerWidth != 'undefined')8 ]5 _1 y& ~; k/ l- [
  10. {- @( u  ^+ @8 T8 U
  11.       viewportwidth = window.innerWidth,$ D0 }$ ?2 G. f& V9 w3 ?2 O' v0 ~; q
  12.       viewportheight = window.innerHeight
    . {) y8 O  b* A3 _9 J7 a1 R, o
  13. }
    1 `- i: ]* B* A. [/ _5 {
  14. 2 R- E+ E- ~9 h5 t1 ]. A" A9 g- [
  15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    + b& \4 w) B" W# d" D, h
  16. 1 l+ Z" [1 O' C, g% P
  17. else if (typeof document.documentElement != 'undefined'
    + q6 x3 _. y# {9 u9 g
  18.      && typeof document.documentElement.clientWidth !=
    6 q# L  q0 P$ |7 `, F5 j
  19.      'undefined' && document.documentElement.clientWidth != 0)/ _  Z( F% l) @: q# z
  20. {4 J, c1 b0 b/ W5 S
  21.        viewportwidth = document.documentElement.clientWidth,
    ; U! i1 P: m3 t* b% {- f
  22.        viewportheight = document.documentElement.clientHeight  V% b' Z9 B; R  X
  23. }. l, ]8 Y; w( O/ m/ ~9 N7 Y7 g
  24. ) r8 |$ d$ [( \  F* n4 k9 u1 H
  25. // older versions of IE3 |) D6 ^3 H# {9 Z. A

  26. 1 t. {1 _1 S3 Z3 D& \; X+ `
  27. else5 U8 G: E; a8 D, \: Y
  28. {' v3 g% e" H5 e, {8 F' w: R. o
  29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,/ O7 Q: V( S% A, p
  30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    ! r9 R) u! \* t3 N" Z
  31. }
    " c9 C* n( e9 J5 ~6 |9 d/ r$ _* ~
  32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');1 `6 K( X; T' ^- S1 k) O7 y* B! w
  33. //-->
    4 U. Y, g# E7 J
  34. </script>
複製代碼
結果: 在google chrome 顯示結果* e, J5 z; D9 L0 r$ r1 ^

8 I6 J% o7 D0 B8 F6 F( ~; k" q+ {1 L9 h8 Q0 a* g; f7 ?
來源: Get viewport size (width and height) with javascript7 |: u6 B8 @3 N, y3 h) f, H$ H

, k! K3 N6 e+ x, |( c/ k* t: L' Q; L5 T




歡迎光臨 52AV手機A片王|52AV.ONE (https://www.52av.one/) Powered by Discuz! X3.2