0

jQueryモバイルを使用して、ページでズームインおよびズームアウト機能を実行する良い方法はありますか? ゴーグルして見つけました

window.parent.document.body.style.zoom = 1.5;

jQueryモバイルでズームインおよびズームアウト機能を実行するより良い方法はありますか?

4

4 に答える 4

3

サンプルの回避策、DEMO http://jsfiddle.net/yeyene/aGuLE/を次に示します。

$(document).ready(function () {
    $('#zoomIn').on('click', function () {
        zoomIn(1.2);
    });
    $('#zoomOut').on('click', function () {
        zoomOut();
    });
});

function zoomIn(zoomLev) {
    if (zoomLev > 1) {
        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 + ")',
                width: $(window).width() / zoomLev
            });
        }
    }
}

function zoomOut() {
    $(document.body).css({
        zoom : '',
        position : '',
        left: "",
        top: "",
        "-moz-transform" : "",
        width : ''  
    });
}
于 2013-07-04T04:57:40.297 に答える
0

Jquery モバイルを使用している場合は<head>、ファイルのメタ データをチェックする必要があります。

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

ビューポート メタデータで が定義されている場合、content="user-scalable=noこれにより、スケーリングまたはズームインおよびズームアウトができなくなります

于 2013-07-03T08:27:30.533 に答える