8

我有一个工作的 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 主体上，这什么也没做。

4

4 回答 4

6

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

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
    }
});
于 2012-12-12T04:46:56.440 回答
1

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

于 2012-07-03T21:39:49.337 回答
0

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

于 2015-01-27T18:33:09.243 回答
0

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

IOS子浏览器：

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

安卓子浏览器：

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

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

 window.plugins.childBrowser.onLocationChange(location);

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

于 2012-09-10T17:58:46.453 回答