在 jquery mobile 或 javascript 中放大和缩小功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17440196/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zoom in and zoom out functionality in jquery mobile or javascript
提问by Shruti
Is there any good way for zoom in and zoom out functionality in a page using jQuery mobile. I goggled it and found
有什么好的方法可以使用 jQuery mobile 在页面中放大和缩小功能。我盯着它发现
window.parent.document.body.style.zoom = 1.5;
Is there any better way to do zoom in and zoom out functionality in jQuery mobile?
有没有更好的方法可以在 jQuery Mobile 中进行放大和缩小功能？
回答by yeyene
Here is a sample workaround, DEMO http://jsfiddle.net/yeyene/aGuLE/
这是一个示例解决方法，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 : ''
});
}
回答by Miguel
Try this. You must have already a meta viewport somewhere.
试试这个。您必须在某处已经有一个元视口。
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
回答by Tombeau
see this link is the best i saw ever :- http://jaukia.github.io/zoomooz/
看到这个链接是我见过的最好的：- http://jaukia.github.io/zoomooz/
and this if you like manual zoom in zoom out:- http://jsfiddle.net/videsignz/KGY7c/
如果你喜欢手动放大缩小：- 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);
});
回答by Khaled Al Hage Ismail
If you are using Jquery mobile you need to check your the meta data in <head>of your file
如果您使用的是 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" />
<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" />
if content="user-scalable=nois defined in your viewport metadata this will prevent you from scaling or zooming in and out
如果content="user-scalable=no在您的视口元数据中定义，这将阻止您缩放或放大和缩小
