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

標題: 取得目前可見視窗內容的尺寸--Javascript [打印本頁]
作者: media    時間: 2014-12-10 17:42
標題: 取得目前可見視窗內容的尺寸--Javascript
本帖最後由 media 於 2014-12-10 19:08 編輯 ! ^5 c- e+ T% l) Z3 Y0 a

3 L9 ?$ R8 W. S  d, r最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。6 D/ O: A3 m" L  B* ]
  1. <script type="text/javascript">% @/ }0 v) r( q+ \/ b; q$ C! F6 Z! E
  2. <!--
    / i6 Q/ |3 p% x

  3. ( q2 l5 G7 z; T
  4. var viewportwidth;: \* y8 A9 n  h' K7 o
  5. var viewportheight;
    1 ]* {* X9 ^# c+ P: d) T4 N6 p

  6. 9 F; ?0 Z0 I' A1 r2 Y, e
  7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    0 w) E) t0 y4 h" d8 y6 Z+ N/ t

  8. / L7 p. `$ @1 {+ b# _
  9. if (typeof window.innerWidth != 'undefined')' \- A, T  a2 Q$ ~# Z
  10. {# T0 R2 R+ P: N4 d" }; r# E* @
  11.       viewportwidth = window.innerWidth,
    + Z! R4 U$ k) j, m
  12.       viewportheight = window.innerHeight. u( o9 }5 t' c
  13. }9 J% \4 p  ~) e8 e; l. o2 k
  14. & M4 d3 i- s. [/ \7 D: D
  15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    6 O8 H5 J9 A5 X* Q# n8 X- V1 z
  16. + I$ Y" i' s  _; i
  17. else if (typeof document.documentElement != 'undefined'7 ~1 A) y7 I! G/ k
  18.      && typeof document.documentElement.clientWidth !=3 a* m9 k: v" ]* |8 ^* [& N
  19.      'undefined' && document.documentElement.clientWidth != 0)
    7 o+ E! s! l7 A+ }( t
  20. {
    ) F" w6 a6 e$ d  j9 L+ X5 a
  21.        viewportwidth = document.documentElement.clientWidth,
    8 z+ a8 m/ [  R+ H  ]0 i0 _& s
  22.        viewportheight = document.documentElement.clientHeight
    0 b. D4 m2 {4 q- Z
  23. }
    . a! O3 U. A) D" a1 n+ e
  24. 4 N) z( `: q: h+ u2 j
  25. // older versions of IE+ h% j( L. M1 p/ i% F
  26.   w8 V6 P4 I1 {# L) L  A6 x1 K
  27. else6 E6 A: j# B" i* p6 Y3 ^5 T
  28. {7 \) O% O; y% k4 F
  29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,- E' X" K1 y9 o2 @9 a! A. ]  p% o9 j
  30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight& P  w  K+ g/ g! b+ T
  31. }+ l2 @$ L( `( p' k# d2 M
  32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
    # k. v5 y5 d# H  l# \4 J, D+ w
  33. //-->; ^/ `" [. I% W7 c
  34. </script>
複製代碼
結果: 在google chrome 顯示結果4 `1 j3 I: P; P/ K8 ~$ z

# L$ ~( f7 O1 C2 l0 k- Q: L* _  r/ m' Y9 L, g* E, q
來源: Get viewport size (width and height) with javascript
! z$ m0 g% @# R' j' S8 j# I, g/ z9 F

: P. j7 V: B/ C6 f



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