0

有没有使用 jQuery mobile 放大和缩小页面功能的好方法。我盯着它，发现

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

有没有更好的方法来做 jQuery 移动中的放大和缩小功能？

4

4 回答 4

3

这是一个示例解决方法，演示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 mobile，则需要检查<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 回答
0

看到这个链接是我见过的最好的：- http://jaukia.github.io/zoomooz/

如果你喜欢手动放大缩小：- http://jsfiddle.net/videsignz/KGY7c/

var imagesize = $('img').width();

$('.zoomout').on('click', function(){
    imagesize = imagesize - 5;
    $('img').width(imagesize);
});

$('.zoomin').on('click', function(){
    imagesize = imagesize + 5;
    $('img').width(imagesize);
});
于 2013-07-03T05:23:57.527 回答
0

尝试这个。您必须在某个地方已经有一个元视口。

var viewportmeta=$("meta[name='viewport']"); //find a viewport meta

viewportmeta.attr("content_original", viewportmeta.attr("content")); //store the initial value
viewportmeta.attr("content", "user-scalable=yes, width=device-width minimum-scale=1, maximum-scale=1"); //make current viewport full zoom out

//do your things... 

viewportmeta.attr("content", viewportmeta.attr("content_original")); //then return back to old  viewport conditions
于 2017-04-10T16:10:44.913 回答