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

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

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

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

<script type="text/javascript">
9 X' {6 n! V: U V& J
<!--& Q, p: g l9 f. { `3 w+ g( s3 [
) i! S. j& n8 |) ?" k* c
var viewportwidth;
" o2 ?% P! O4 u2 `' v
var viewportheight;
# k7 V! r% z% Y0 U5 ]- J
/ L% E2 Y! ?8 r v9 W
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
2 n9 s8 ~- I$ r
2 ~" [; Y% ]# D( ~& D
if (typeof window.innerWidth != 'undefined')3 ?. C: }# @3 y$ I$ Q2 D
{
+ J' P6 Z. D$ K6 B
viewportwidth = window.innerWidth,8 V* s( @7 J' G1 ]' u
viewportheight = window.innerHeight
1 I2 `, t# q1 }
}1 S" ]+ _$ h+ M% H
) g3 f% X# C2 K" Q
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)" [% \, o4 M! \, h# O8 @1 d
( e/ }6 g6 b* {4 h9 U
else if (typeof document.documentElement != 'undefined'
& H) r! m' [' L; t& j
&& typeof document.documentElement.clientWidth !=* K/ F* F ?- {
'undefined' && document.documentElement.clientWidth != 0)
. l3 V0 ?, R# k8 p; ]" T m" z
{' v( `! x8 m) r: }9 r# m
viewportwidth = document.documentElement.clientWidth,
. y } o! Y# c- c! y
viewportheight = document.documentElement.clientHeight- U5 z# N1 T, l7 O: J
}
; Z ?; Z- i1 v- g
9 @% K3 {* N) v
// older versions of IE8 f% J) [! X9 V& c
5 r$ B A: v0 Z, N
else
- `) O% v3 C2 h0 u
{2 _0 V# N5 \+ y" t' r
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
- ^) A* K- @# f+ q% ?/ L1 x+ S
viewportheight = document.getElementsByTagName('body')[0].clientHeight- H, C& S2 d& x: n
}
# y' K2 f" r" o/ A, M+ u
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');: r! o( T9 z, a5 S9 V0 ]
//-->1 z' R& G, i4 G& ~6 `
</script>

複製代碼

結果: 在google chrome 顯示結果

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

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

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

瀏覽過的版塊