52AV手機A片王|52AV.ONE
標題:
取得目前可見視窗內容的尺寸--Javascript
[打印本頁]
作者:
media
時間:
2014-12-10 17:42
標題:
取得目前可見視窗內容的尺寸--Javascript
本帖最後由 media 於 2014-12-10 19:08 編輯
/ z! Y! R9 f0 X9 I5 @
" y% b A2 A' P% z) F
最近用javascript取視窗的大小時,遇到不同瀏覽器無法偵測或不同的寬高的問題。後來找到下段這段程式碼,當用於點圖放大並顯示於前景中央位置時非常有用。
4 J& T0 @- Z+ `) I" ?8 f% \
<script type="text/javascript">
, ^, k& Q1 o( I s+ M4 t( p0 U; ?
<!--
; l' K; D4 n+ K+ P/ d2 a
# O, L2 N( W2 ]6 ~9 J+ X
var viewportwidth;
( _9 f+ {3 v1 s S5 n
var viewportheight;
% b7 d2 K1 I' h( W+ x/ F
9 u, g: a( d, k* z' A
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
Y7 F* X/ N6 T3 y9 e6 X
5 F$ C* b- O. O' V
if (typeof window.innerWidth != 'undefined')
2 L9 q, F+ y% _1 h# G
{
1 W2 t; p$ h4 @( t3 |$ J
viewportwidth = window.innerWidth,
: S# f; }* d1 V' ?! Q
viewportheight = window.innerHeight
& N' D, T" k6 W' X, B' f% E
}
1 }6 o/ b9 q* D$ q+ v: ?
l6 A6 b3 G$ R; {1 t/ c) x5 z
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
3 r3 t4 M2 V s& j5 ]1 ?" v
8 Q4 }1 @: ~. I0 I
else if (typeof document.documentElement != 'undefined'
" T x. ~" O/ n1 E
&& typeof document.documentElement.clientWidth !=
~0 B6 S: x- Y t6 r3 |9 x8 E
'undefined' && document.documentElement.clientWidth != 0)
' t% r( K/ ~, V$ P
{
4 l* h( ^, e q8 A7 Q- s: j B
viewportwidth = document.documentElement.clientWidth,
3 t' T, s! Z" R) e
viewportheight = document.documentElement.clientHeight
7 m+ e/ l" O( o9 ?! b! e, N, [
}
3 c5 u5 h9 ^; _! Q; m! `% n+ i. D
; H5 S( ^5 c1 C
// older versions of IE
8 I* w2 [" x6 W( C
1 k/ Q+ F- d2 x1 y. v
else
' }3 k7 y6 ^1 u7 M2 V0 m) x; Q
{
' _1 G$ ~3 H/ R1 }5 o6 N( K
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
4 ]2 A/ u6 S6 R0 l0 D
viewportheight = document.getElementsByTagName('body')[0].clientHeight
) N" q2 U& b& ~0 p3 D5 l# x4 W$ O
}
+ y' j( X' E* r
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
/ D9 Y) k- k9 y8 n1 K' h
//-->
! _4 b- V* Y5 L; U3 B! H" I6 e+ M! m
</script>
複製代碼
結果: 在google chrome 顯示結果
# u; s7 J) e; O% @; V7 n0 g
1.png
(81.75 KB, 下載次數: 297)
下載附件
保存到相冊
2014-12-10 19:08 上傳
, {1 }" V4 J/ @8 w. g- a
{* o. E7 }( @6 H( r* J
來源:
Get viewport size (width and height) with javascript
8 C0 V! Z: i9 Y
8 l4 F; A+ Y4 l# G& T. N
" g( o+ x4 O" m; ^6 P* M
歡迎光臨 52AV手機A片王|52AV.ONE (https://www.itech.casa/)
Powered by Discuz! X3.2