仅限 JQuery 移动捏缩放图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10777800/
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
JQuery Mobile Pinch Zoom Image Only
提问by Halsafar
I have a working JQM application that I'd like to display some images in. The images currently are in their own iframe so they can be scrolled separately from the app.
我有一个可用的 JQM 应用程序，我想在其中显示一些图像。图像当前位于它们自己的 iframe 中，因此它们可以与应用程序分开滚动。
I'd like to be able to pinch zoom only the images within the iframe as well.
我也希望能够仅缩放 iframe 中的图像。
I realize if I adjust the following code snippet that I can enable pinch zoom but this enabled it for the entire application.
我意识到如果我调整以下代码片段，我可以启用捏合缩放，但这会为整个应用程序启用它。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
By removing maximum-scale pinch zoom returns but for everything.
通过删除最大比例捏缩放返回但适用于所有内容。
Is there a way to enable pinch zoom only for an image? How about adding a new viewport tag to the iframe, would that work if that is even possible?
有没有办法只为图像启用捏缩放？向 iframe 添加一个新的视口标签怎么样，如果可能的话，这会起作用吗？
UPDATE
更新
Injected HTML into the iframe. Added the meta tag, this did not help.
Tried .extend($.mobile.zoom, {locked:false,enabled:true}); on the iframe body, this did nothing.
将 HTML 注入 iframe。添加了元标记，这没有帮助。
试过 .extend($.mobile.zoom, {locked:false,enabled:true}); 在 iframe 主体上，这什么也没做。
采纳答案by Halsafar
It turns out the best way to do this is to use the ChildBrowser plugin. This on IOS and Android works perfect for images.
事实证明，最好的方法是使用 ChildBrowser 插件。这在 IOS 和 Android 上非常适合图像。
IOS Childbrowser:
IOS 儿童浏览器：
https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser
Android ChildBrowser:
安卓子浏览器：
https://github.com/phonegap/phonegap-plugins/tree/master/Android/ChildBrowser
Then once you have done all the setup you can open URL's or local files like this:
完成所有设置后，您可以打开 URL 或本地文件，如下所示：
window.plugins.childBrowser.onLocationChange(location);
Do note that in a fully cross platform setup between IOS and Android they both need different versions of the plugin. IOS requires ChildBrowser init in onDeviceReady, Android does not.
请注意，在 IOS 和 Android 之间的完全跨平台设置中，它们都需要不同版本的插件。IOS 需要 onDeviceReady 中的 ChildBrowser init，Android 不需要。
回答by Sujan Shrestha
you can do this on image:
您可以在图像上执行此操作：
var image=document.getElementById('imageId');
image.addEventListener('gesturechange',function(e){
if(e.scale>1){
//zoom in
//increase the size of image according to the e.scale
}
else if(e.scale<1){
//zoom out
//decrease the size of image according to the e.scale
}
});
回答by Jeffery To
As a (hack) workaround, perhaps you can detect when the user is performing a pinch gesture, then zoom the image using a CSS transform.
回答by HoaPhan
Would using some kind of widget to zoom in/out the image inplace work?
eg:
http://0.s3.envato.com/files/78471334/index.html
https://github.com/timmywil/jquery.panzoom
使用某种小部件放大/缩小图像就地工作吗？例如：http:
//0.s3.envato.com/files/78471334/index.html
https://github.com/timmywil/jquery.panzoom
