Question

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

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

我意识到如果我调整以下代码片段，我可以启用缩放缩放，但这样可以为整个应用程序启用它。

<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主体上，这没有做任何事情。

Answer 1

你可以在图像上执行此操作：

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

Answer 2

作为（黑客）解决方法，也许您可以检测用户何时执行捏gesture，然后使用CSS transform缩放图像。

Answer 3

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

IOS Childbrowser：

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

Android ChildBrowser：

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

然后，完成所有设置后，您可以打开URL或本地文件，如下所示：

 window.plugins.childBrowser.onLocationChange(location);

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

Answer 4

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

JQuery Mobile Pinch仅限缩放图像

4 个答案: