0

こんにちは、このズーム JavaScript コードを使用して、画面サイズに応じて div をズームしていますが、iPad をポートレート モードに設定すると、ズーム スクリプトが動作しなくなります。これがスクリプトです。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" language="javascript">

var minW = 1800;

$(function () {
CheckSizeZoom()
$('#divWrap').css('visibility', 'visible');
});
$(window).resize(CheckSizeZoom)

function CheckSizeZoom() {
if ($(window).width() < minW) {
var zoomLev = $(window).width() / minW;

if (typeof (document.body.style.zoom) != "undefined") {
$(document.body).css('zoom', zoomLev);
}
else {
// Mozilla doesn't support zoom, use -moz-transform to scale and compensate for lost width
$('#divWrap').css('-moz-transform', "scale(" + zoomLev + ")");
$('#divWrap').width($(window).width() / zoomLev + 10);
$('#divWrap').css('position', 'relative');
$('#divWrap').css('left', (($(window).width() - minW - 16) / 2) + "px");
$('#divWrap').css('top', "-19px");
$('#divWrap').css('position', 'relative');
}
}
else {
$(document.body).css('zoom', '');
$('#divWrap').css('position', '');
$('#divWrap').css('left', "");
$('#divWrap').css('top', "");
$('#divWrap').css('-moz-transform', "");
$('#divWrap').width("");
}
}
</script>

乾杯

4

2 に答える 2

0

$(window).width()をと照合し$(window).height()て、デバイスの向きを確認します。

もう 1 つのヒントは、$('#divWrap').css('position', '').css('left', '').css('top', '');パフォーマンスを向上させるために、このように jQuery 呼び出しを連鎖させることです。

于 2013-04-10T11:21:23.217 に答える
0

ポートレート モードの WDever を検出するには、すでに正しい答えが提示されています。ただし、この場合、.css() 関数を使用する 2 つの方法のいずれもお勧めしません。次のように、この関数にオブジェクトを渡すことができます。

$('#divWrap').css({
    position: '',
    left: '',
    top: ''
});

こうすることで、コードをクリーンで短く、読みやすく保つことができます。

于 2013-04-10T11:33:36.797 に答える