取得目前可見視窗內容的尺寸--Javascript[含1張圖]

media · 發表於 2014-12-10 17:42:11

本帖最後由 media 於 2014-12-10 19:08 編輯

最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼，當用於點圖放大並顯示於前景中央位置時非常有用。

<script type="text/javascript">( R1 V0 P. F0 V' u5 f. [
<!--
* m$ }; D* Q$ |$ }7 F7 V4 L
2 s" L. H$ n9 w2 J3 b4 [; j4 M
var viewportwidth;
5 _+ [' N9 q V9 |, l0 H0 S
var viewportheight;( u' P( @2 x* Q8 V
7 g) g z2 D) _; t
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
: O' X! t! ?5 \7 P
/ z/ W- S0 e1 r% R3 d! E' r: T
if (typeof window.innerWidth != 'undefined')( m+ t) d& Z2 ]
{1 _( d; c3 u) Y1 a* ~& s9 a/ w
viewportwidth = window.innerWidth,
# h2 e8 r% m" u/ U. e
viewportheight = window.innerHeight
8 u0 T1 H v& M$ Y, u6 B
}: i0 ^9 ~+ `0 ^+ c
) }# D9 K& o1 O0 D
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)- T" Y# l# G1 X. Y
6 t" R3 L8 w \) k) s; t
else if (typeof document.documentElement != 'undefined'
: v( q6 `' ?1 g E
&& typeof document.documentElement.clientWidth !=
" R4 p: u8 {/ S, A% O0 S
'undefined' && document.documentElement.clientWidth != 0)
/ @! H' M4 A8 B3 `
{
8 A: j) K; ] V7 g V5 e- p
viewportwidth = document.documentElement.clientWidth,
: M/ n) T" W/ }3 c0 _* u$ U7 f; b
viewportheight = document.documentElement.clientHeight
! P% ~7 l& p$ J5 U$ D7 c
}
% ]# |0 V- o3 r+ g0 J. B
R! Z- \5 \% w8 h0 S7 H$ w K+ [/ S
// older versions of IE
. Z" v% N- z5 b9 q2 }$ i6 J8 [7 o
" ]. v' x8 `2 m
else
! x1 U' N# C: T3 d. @) f, u9 V9 C( ]
{
% J, O$ Y' |9 j2 h6 v* O. M! y
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,9 X5 R% M. U8 b! N0 l3 b
viewportheight = document.getElementsByTagName('body')[0].clientHeight
; e# F! d8 B0 R8 b
}/ q+ N b G/ ?; i% @/ K, i+ C
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');8 J5 Y# ?/ L2 _
//-->2 W& X1 F1 i( ~0 C4 U$ ]4 h
</script>

複製代碼

結果: 在google chrome 顯示結果

來源: Get viewport size (width and height) with javascript

		自動登錄	找回密碼
密碼			立即註冊

[HTML] 取得目前可見視窗內容的尺寸--Javascript[含1張圖]