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

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

作者: media    時間: 2014-12-10 17:42
標題: 取得目前可見視窗內容的尺寸--Javascript
本帖最後由 media 於 2014-12-10 19:08 編輯 1 h. J4 [* x/ u- z( n% s& z

* K7 k3 k! ?/ S7 O0 v# Q' N" S最近用javascript取視窗的大小時,遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼,當用於點圖放大並顯示於前景中央位置時非常有用。- A: a3 L6 Q  e
  1. <script type="text/javascript">3 n: `. S3 u2 n9 T
  2. <!--9 D/ {! X4 X- U$ F7 L1 P

  3. : G. j5 B( f. S4 G, r
  4. var viewportwidth;. D  O+ [4 \  S
  5. var viewportheight;
    % r2 e8 P$ V5 {! @8 w7 p
  6. ) L% y3 k6 X0 D! ~
  7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    . i% \/ _4 t3 k3 r8 j. ]$ h- O

  8. ! E1 B" O+ k/ X2 ^$ f6 N7 S
  9. if (typeof window.innerWidth != 'undefined')8 a5 k  _* s6 @* g
  10. {
    ! C4 {, W7 J% N1 L' Y( L& i! {+ i
  11.       viewportwidth = window.innerWidth,& G* D# |# t8 Z; w  a' m5 G! u
  12.       viewportheight = window.innerHeight
    3 T8 t) ~% n! q
  13. }
    ' ~+ |4 X# C) [" x2 N

  14. 1 l* q, e; ~- u4 l. s9 s
  15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)/ `& @3 o- ~$ b" [  a$ ]& [/ a

  16. * g  `6 Y2 G+ R4 H; Z( K" D
  17. else if (typeof document.documentElement != 'undefined'
    # C1 k. @0 s% A7 d( j" K5 X& k
  18.      && typeof document.documentElement.clientWidth !=
    : v* s5 g0 l; n/ ^
  19.      'undefined' && document.documentElement.clientWidth != 0)
    : W7 w6 o  [/ w! A
  20. {
    4 B' L% F7 [2 z( o1 V/ X4 E: }
  21.        viewportwidth = document.documentElement.clientWidth," F- C$ x2 D$ ]0 \) w$ d2 Q% x
  22.        viewportheight = document.documentElement.clientHeight
    1 j" B/ {4 Q3 D9 A3 A. B  G
  23. }
    & e( o* G( i0 O' R7 t  [3 B7 F

  24.   x+ \9 ]/ k: f' \. @/ V. W
  25. // older versions of IE
    2 o1 c  _/ A) U/ |+ l

  26. ( }8 [& N8 g3 [( r: o
  27. else0 ]+ B! x9 N4 @! t# @, {; Z, N% s
  28. {3 y) ~9 w$ I* o; K3 m: w- [9 n
  29.        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    2 H& t% Q) n& R6 `) a- a9 E; {
  30.        viewportheight = document.getElementsByTagName('body')[0].clientHeight! P4 ?' S3 B! V, x
  31. }1 g- e/ {6 i3 e% Z6 c" `5 `
  32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');; J' j3 D8 F* C7 l* {% `
  33. //-->' \2 @) w7 I% ?7 T
  34. </script>
複製代碼
結果: 在google chrome 顯示結果
: S6 T* V  Z7 ~% y% M' l8 P' w. v6 ?
4 B! B+ X' m' {  B
! y) {2 b4 ^2 E% T
來源:
Get viewport size (width and height) with javascript
( @+ X0 e" P1 Y# k" U
  g2 U" Q) g. e; f, J% A
! J8 W0 e0 A5 ^; X





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