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

標題: 取得目前可見視窗內容的尺寸--Javascript [打印本頁]
作者: media    時間: 2014-12-10 17:42
標題: 取得目前可見視窗內容的尺寸--Javascript
本帖最後由 media 於 2014-12-10 19:08 編輯
* M8 l3 M, Q. H4 d) o
, Q  M7 M; N' t最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。; H4 [' }: n1 I- v: }/ X; ^) l' C
  1. <script type="text/javascript">5 c. n# r4 ~$ x7 w
  2. <!--9 ~; n+ @# D' v$ A) D6 L8 B8 @
  3. 9 r9 K  \' }4 P3 v
  4. var viewportwidth;
    ' x% R* S- s- }7 w7 u8 [" o# X
  5. var viewportheight;
    ' \4 z( C& _; _7 y7 t( P

  6. ) n5 D! I8 p- q& m! _! ^
  7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    , P6 v- M( u( x8 ~
  8. 4 k* Z$ |$ o1 x1 m- H
  9. if (typeof window.innerWidth != 'undefined'). H% K8 v4 `' ^# Y8 d# \
  10. {' ~2 _7 n; X) m0 |# o! [0 f$ I
  11.       viewportwidth = window.innerWidth,7 E8 x% Q; J; s! }; a7 |- l7 B
  12.       viewportheight = window.innerHeight3 x, Y$ o# S( n6 U# m, z* L1 F
  13. }
    ! @$ j4 p( @" h7 `
  14. 1 H, Y' s# Q# p3 I# O! ]3 Q
  15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    ; _2 Q& h8 a& @- _( A. M  H$ c  Z
  16. $ j- j$ V0 K/ v+ x# L
  17. else if (typeof document.documentElement != 'undefined'
    ( a4 k7 U: L2 O. y9 d
  18.      && typeof document.documentElement.clientWidth !=' i! ^% Q) P$ O) {- x& {* z% @5 @
  19.      'undefined' && document.documentElement.clientWidth != 0). w9 W+ I$ _. V
  20. {$ ], @# ~* t! K8 i+ H
  21.        viewportwidth = document.documentElement.clientWidth,) W- }1 }) \: T- o1 y. W! }
  22.        viewportheight = document.documentElement.clientHeight# _1 f/ N7 r# e
  23. }. ?4 ^# z+ |' `' }0 C

  24. : V+ Z1 J' G5 V" ?2 T5 ?8 g
  25. // older versions of IE
    ! _4 K1 c# n* H" b; p

  26. ! M) \* u1 k- }
  27. else) Z4 k" @/ u. `  L7 o! C% V, V3 p7 @
  28. {4 p& B1 D* L6 m! j5 d& \
  29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    & C3 ?0 Z5 h* a9 R
  30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight0 B# K2 a9 v" o2 M
  31. }+ A0 e4 F8 c$ Y& A$ I1 D
  32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    # ^5 a5 Y1 [5 Y: c& a
  33. //-->
    ( C  @. A8 b7 a2 M6 X; U/ U
  34. </script>
複製代碼
結果: 在google chrome 顯示結果
4 h6 Z1 e" X5 F! w
/ g: q/ |+ R/ w% ~7 I) P% Y1 c  K; X8 V. A5 |' J/ L: a
來源: Get viewport size (width and height) with javascript
4 F4 E) c1 F$ o% y/ Z
* n4 x" a( `4 @! S
9 t# U; }% v  }! w3 m



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