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

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

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

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

<script type="text/javascript">
( i1 B, @' e8 B, ?% V6 i' R- d9 E
<!--- C2 m' Z4 c: t- z' W1 R# z9 }
7 }% Q: R z6 c% R h6 `
var viewportwidth;
/ r G6 D' o% ~' ~0 j( H
var viewportheight;8 \ U Q2 }+ y* Z, b# x
H+ V9 B9 o6 T* @6 K! r
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight1 M- Y6 V" z+ x6 T. r) [/ [
* W) G( ^8 F+ f. K) Z# L6 Q
if (typeof window.innerWidth != 'undefined')
1 _7 |, H- @6 }) [# F* D
{2 p) A) X1 k& F& E
viewportwidth = window.innerWidth,8 k& c$ y6 R( F
viewportheight = window.innerHeight
+ _6 [ P6 p, v( D
}8 y7 Z- I% s2 C
; V, ~" Q% c- h# _, b+ V
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
1 L4 z0 n' g4 d
! r9 d- c8 X6 M! T' K' ~
else if (typeof document.documentElement != 'undefined'8 H2 C6 Y! d y+ A& y
&& typeof document.documentElement.clientWidth !=' H2 G. k0 }$ n/ A; l/ _, I) |
'undefined' && document.documentElement.clientWidth != 0)
5 @+ c1 `0 V( @# l+ e
{- o5 }+ J U. v
viewportwidth = document.documentElement.clientWidth,6 U4 c) |; l! F( C9 a
viewportheight = document.documentElement.clientHeight9 P, o- I9 K, A" q. k' g2 Y
}
) ^9 e6 o$ z% ^2 F
4 P9 s+ Z& p# S% S: } d
// older versions of IE, M/ n' m3 z( s9 r
1 l: ?8 [# d* @( H: |$ T- T8 M1 O
else
8 c8 l/ H1 | L1 S/ e
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
, B( [& e3 O! e( g( e
viewportheight = document.getElementsByTagName('body')[0].clientHeight, |1 @: k" I1 m) E% C
}
/ V g) |6 f2 x; W
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
; P; Z6 n q4 _2 U% p# r; F
//-->
% h) g( G0 O7 H/ n& ^
</script>

複製代碼

結果: 在google chrome 顯示結果

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

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

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

瀏覽過的版塊