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

標題: 取得目前可見視窗內容的尺寸--Javascript [打印本頁]

作者: media    時間: 2014-12-10 17:42
標題: 取得目前可見視窗內容的尺寸--Javascript
本帖最後由 media 於 2014-12-10 19:08 編輯 / z! Y! R9 f0 X9 I5 @
" y% b  A2 A' P% z) F
最近用javascript取視窗的大小時,遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼,當用於點圖放大並顯示於前景中央位置時非常有用。4 J& T0 @- Z+ `) I" ?8 f% \
  1. <script type="text/javascript">
    , ^, k& Q1 o( I  s+ M4 t( p0 U; ?
  2. <!--
    ; l' K; D4 n+ K+ P/ d2 a
  3. # O, L2 N( W2 ]6 ~9 J+ X
  4. var viewportwidth;( _9 f+ {3 v1 s  S5 n
  5. var viewportheight;% b7 d2 K1 I' h( W+ x/ F

  6. 9 u, g: a( d, k* z' A
  7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
      Y7 F* X/ N6 T3 y9 e6 X

  8. 5 F$ C* b- O. O' V
  9. if (typeof window.innerWidth != 'undefined')2 L9 q, F+ y% _1 h# G
  10. {1 W2 t; p$ h4 @( t3 |$ J
  11.       viewportwidth = window.innerWidth,
    : S# f; }* d1 V' ?! Q
  12.       viewportheight = window.innerHeight& N' D, T" k6 W' X, B' f% E
  13. }1 }6 o/ b9 q* D$ q+ v: ?

  14.   l6 A6 b3 G$ R; {1 t/ c) x5 z
  15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)3 r3 t4 M2 V  s& j5 ]1 ?" v
  16. 8 Q4 }1 @: ~. I0 I
  17. else if (typeof document.documentElement != 'undefined'" T  x. ~" O/ n1 E
  18.      && typeof document.documentElement.clientWidth !=
      ~0 B6 S: x- Y  t6 r3 |9 x8 E
  19.      'undefined' && document.documentElement.clientWidth != 0)
    ' t% r( K/ ~, V$ P
  20. {4 l* h( ^, e  q8 A7 Q- s: j  B
  21.        viewportwidth = document.documentElement.clientWidth,
    3 t' T, s! Z" R) e
  22.        viewportheight = document.documentElement.clientHeight
    7 m+ e/ l" O( o9 ?! b! e, N, [
  23. }
    3 c5 u5 h9 ^; _! Q; m! `% n+ i. D
  24. ; H5 S( ^5 c1 C
  25. // older versions of IE
    8 I* w2 [" x6 W( C
  26. 1 k/ Q+ F- d2 x1 y. v
  27. else
    ' }3 k7 y6 ^1 u7 M2 V0 m) x; Q
  28. {
    ' _1 G$ ~3 H/ R1 }5 o6 N( K
  29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,4 ]2 A/ u6 S6 R0 l0 D
  30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight) N" q2 U& b& ~0 p3 D5 l# x4 W$ O
  31. }+ y' j( X' E* r
  32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');/ D9 Y) k- k9 y8 n1 K' h
  33. //-->
    ! _4 b- V* Y5 L; U3 B! H" I6 e+ M! m
  34. </script>
複製代碼
結果: 在google chrome 顯示結果# u; s7 J) e; O% @; V7 n0 g
, {1 }" V4 J/ @8 w. g- a
  {* o. E7 }( @6 H( r* J
來源:
Get viewport size (width and height) with javascript

8 C0 V! Z: i9 Y8 l4 F; A+ Y4 l# G& T. N

" g( o+ x4 O" m; ^6 P* M




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