在jquery mobile或javascript中放大和缩小功能

是否有任何好方法可以在使用jQuery mobile的页面中放大和缩小功能。我看到它，发现在jquery mobile或javascript中放大和缩小功能

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

有没有更好的方法来放大和缩小功能在jQuery手机？

来源

2013-07-03 Shruti

这里变焦是一个简单的解决办法，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-04 04:57:40 yeyene

看到这个链接是我看到过的最好的： - 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-03 05:23:57 Tombeau

你放大和缩小只有一个形象。我需要在放大了整个页面 – Shruti

看到的jsfiddle链接 – Tombeau

是的，我已经看到了你，你在放大或缩小只有一个图像进行放大。如果有很多在listview.labels和text等页面竞争。我会做什么？ – Shruti

如果你正在使用jQuery Mobile的，你需要检查你在你的文件

<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" />

如果的<head>元数据中视口的元数据定义，这将阻止您缩放或进出

来源

2013-07-03 08:27:30

你可以给我任何例子..？ – Shruti

你只需要检查你的html页面，主要是你需要检查什么发现属性如果有我是一个属性，它包含

试试这个。你必须有一个元视口。

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-10 16:10:44 Miguel

在jquery mobile或javascript中放大和缩小功能

回答

相关问题