本帖最後由 media 於 2014-12-10 19:08 編輯
/ \, W3 p8 u% O9 `3 }' _+ [( T
@4 Y% o9 j" N) _# Y最近用javascript取視窗的大小時,遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼,當用於點圖放大並顯示於前景中央位置時非常有用。
, b3 @/ b" e+ d# c3 @+ C% I, w- <script type="text/javascript">7 j0 |/ T* X$ T
- <!--' h @9 z4 t+ J7 ]* {, O
- & Z4 M9 m" ^% k$ `; e
- var viewportwidth;: O8 z! c* N; U6 e
- var viewportheight;
+ K( f1 o7 h- i% d - , _5 H3 G% H0 [1 X
- // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
) P N0 c; P w1 u' ~& e+ X) w - % g/ {/ d6 u0 ^9 q r0 t, r
- if (typeof window.innerWidth != 'undefined')
' g- {1 M" b: H4 h - {
. v5 w! N! k" [( v' u2 ?8 r - viewportwidth = window.innerWidth,6 |3 Z0 Q4 f2 E, b6 e( S6 G8 G
- viewportheight = window.innerHeight- V7 x2 o& ]0 b5 Z, }
- }2 m: q0 |. o2 K6 c
-
- p: |8 l. W3 ]: I( I - // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
0 i' `* }. z: r* `# U9 ^0 |9 J - # x5 Q! t- O; z6 e8 ?* c4 k: t
- else if (typeof document.documentElement != 'undefined'
) I0 ]; g' \7 W+ ^) U8 R# E T - && typeof document.documentElement.clientWidth !=7 ]) ^* D% E9 ^; M2 L; q
- 'undefined' && document.documentElement.clientWidth != 0)
% B2 @/ j; \/ t D) ?3 b% B - {
) y! L( ]+ b0 Q9 ~6 [ K! A$ ~ - viewportwidth = document.documentElement.clientWidth,
$ Z8 y+ J1 E/ S6 X - viewportheight = document.documentElement.clientHeight
; E6 |2 y; w* k' r! b1 a - }
# `; M4 @: j ?$ R5 C: V - 6 _4 ?) B# M5 `- r" a) v
- // older versions of IE5 p7 u$ H& v/ ^; z" G
- " A$ {2 \7 X. B- C: U/ m
- else% u- a! t: |9 @4 Y& c* n2 G! J
- {
, b) J! F9 W, f - viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
5 V/ i% V. E5 ^; }. ?$ x* y - viewportheight = document.getElementsByTagName('body')[0].clientHeight6 s5 j' l6 G) G8 n
- }; ]8 x) n2 Q: ]6 A, F+ S
- document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
4 b' \+ z3 G& r - //-->
^( @) U X- b# k - </script>
複製代碼 結果: 在google chrome 顯示結果
) }8 l/ r- }0 J4 |, k1 | N
1 h9 i/ K6 p! G' X7 R
$ @& l- _5 f. `; U來源: Get viewport size (width and height) with javascript. r4 f. K- }% W$ b- _3 o
7 ^& V, B& H# Z/ {1 Q+ O5 W! O; e0 V
" _& ]* L! ~$ a' W. M3 k, k i/ `6 O5 J |
|