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

標題: 取得目前可見視窗內容的尺寸--Javascript [打印本頁]
作者: media    時間: 2014-12-10 17:42
標題: 取得目前可見視窗內容的尺寸--Javascript
本帖最後由 media 於 2014-12-10 19:08 編輯
( ~0 F' O$ \+ V- ^9 X) p
( p4 ~* p9 X8 ~* e最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。0 p8 l( m# ^4 z5 n
  1. <script type="text/javascript">
    * T+ A4 M, G* O, n3 \% j4 R
  2. <!--
    * y: ?* Y6 |$ o7 D

  3. . j, z. s9 j5 X
  4. var viewportwidth;$ G6 ?2 n. q% q" I2 C! R
  5. var viewportheight;
    8 |1 `, Q* u0 z' ]4 R3 j

  6. + s7 B7 W5 P5 l" x, g# \% P
  7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight; e5 @' V4 x- m* j' L

  8. 4 j0 Z1 o* w0 r' C' \6 K1 o
  9. if (typeof window.innerWidth != 'undefined')# q5 V( Z) S5 R1 w: d$ {5 h
  10. {
    0 \# n% _  Q/ X2 Z& a$ e" k9 \5 r
  11.       viewportwidth = window.innerWidth,: z* M) n8 Y8 G" b! N
  12.       viewportheight = window.innerHeight. e, t" r  X- R$ @5 u: e7 ^7 a
  13. }
    ) ^$ f/ O+ s2 t. D2 I5 ]6 V
  14. 9 t+ m2 ^6 r) \
  15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    0 }8 t( Z2 i) c

  16. ( L* c' W" V  U4 D: v3 z( I4 E. J
  17. else if (typeof document.documentElement != 'undefined'' v- Q3 ~( l1 ~% {
  18.      && typeof document.documentElement.clientWidth !=# U7 B& M& z3 Q
  19.      'undefined' && document.documentElement.clientWidth != 0), H. i% ], S- d: Y/ m3 O/ R
  20. {
    $ l$ M4 n4 \' G0 L% ]% M0 U
  21.        viewportwidth = document.documentElement.clientWidth,0 B, k6 i' i% [
  22.        viewportheight = document.documentElement.clientHeight
    , x3 O* ]9 O, C1 M3 T
  23. }
    * _! o4 o5 d9 g; c0 S
  24. + u% V; X/ N! H3 O& ^
  25. // older versions of IE$ B! a+ O7 N8 _4 T. m% \

  26. ) Q% J/ b' \. l8 }+ W
  27. else: q- V  }  T( p2 [  F
  28. {
    3 B# t1 z" r# b1 e/ b
  29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,  d# y' [% b) ?8 i  u2 f
  30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight; N" B' h& W" f& s
  31. }
    ( b) `7 a' u  u1 \' _6 E
  32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');# m! ~" @! q8 F+ X/ F% ~
  33. //-->% V+ D6 K& o8 V
  34. </script>
複製代碼
結果: 在google chrome 顯示結果
: T* m9 E* w( B/ e
/ M# H  K" j4 M2 }- q: j2 K
1 T' h; g4 q3 @來源: Get viewport size (width and height) with javascript3 t* k& Z0 r; ?! R  P

. C; K. q" c$ [. Y* S
* C8 |! c8 Q* Q! y5 @) H2 j1 K; ?+ T



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