JQuery Mobile 仅缩放图像

Posted 2023-03-04

【中文标题】JQuery Mobile 仅缩放图像

【英文标题】：JQuery Mobile Pinch Zoom Image Only

【发布时间】：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 主体上，这什么也没做。

【参考方案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 缩放图像。