JQuery Mobile 仅缩放图像答案

【问题标题】：JQuery Mobile Pinch Zoom Image OnlyJQuery Mobile 仅缩放图像
【发布时间】：2012-06-02 09:59:48
【问题描述】：

我有一个正在运行的 JQM 应用程序，我想在其中显示一些图像。图像当前位于它们自己的 iframe 中，因此它们可以与应用程序分开滚动。

我也希望能够仅缩放 iframe 中的图像。

我意识到如果我调整以下代码 sn-p 可以启用捏缩放，但这会为整个应用程序启用它。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

通过删除最大比例的捏缩放返回，但适用于所有内容。

有没有办法只为图像启用捏缩放？向 iframe 添加一个新的视口标签怎么样，如果可能的话，这会起作用吗？

更新

将 HTML 注入 iframe。添加了元标记，这没有帮助。
试过 .extend($.mobile.zoom, {locked:false,enabled:true});在 iframe 主体上，这什么也没做。

【问题讨论】：

标签： jquery html cordova jquery-mobile pinchzoom

【解决方案1】：

会使用某种小部件来放大/缩小图像吗？例如： http://0.s3.envato.com/files/78471334/index.html
https://github.com/timmywil/jquery.panzoom

【讨论】：

我做了测试。我没有说它是免费的，我假设开发人员可以检查代码。对不起，这不符合你的口味，老板：v

【解决方案2】：

你可以在图片上这样做：

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
    }
});

【讨论】：

正是需要的！

【解决方案3】：

事实证明，最好的方法是使用 ChildBrowser 插件。这在 IOS 和 Android 上非常适合图像。

IOS 子浏览器：

 https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser

Android 子浏览器：

 https://github.com/phonegap/phonegap-plugins/tree/master/Android/ChildBrowser

完成所有设置后，您可以像这样打开 URL 或本地文件：

 window.plugins.childBrowser.onLocationChange(location);

请注意，在 IOS 和 Android 之间完全跨平台的设置中，它们都需要不同版本的插件。 IOS 需要在 onDeviceReady 中初始化 ChildBrowser，Android 不需要。

【讨论】：

【解决方案4】：

作为一种（hack）解决方法，也许您可以检测到用户何时进行捏合gesture，然后使用CSS transform 缩放图像。

【讨论】：