javascript - Phonegap Android 捏合缩放

Question

我正在使用 jQuery Mobile 和 Phonegap 开发 Android 应用程序。我想在应用程序页面上启用捏合缩放。很多解决方案建议使用以下行，但它不起作用 -

<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">

有没有完美的解决方案来缩放应用程序页面捏合或双击页面？谢谢。

Answer 1

多年来我一直在处理这个问题。在这段时间里我只是找到了一种解决方案。

您可以创建要放大为两种或更多种尺寸的图像。通过在 W3Schools(ShowHide) 处找到 Jquery 的 show 和 hide 函数您可以管理其中一个隐藏，另一个在显示的每一个上方点击显示。

它确实对我有用，尽管它不能通过捏合手势进行缩放，但它是使用phonegap显示图像细节的一种简单而强大的方法。

这是我仅使用 JS 的方法。

在标题上引入脚本:

<script type="text/javascript">
function ampliar() {
        var e = document.getElementById("granderizable");
          if(e.style.display == 'block')
            e.style.display = 'none';
          else
            e.style.display = 'block';}
</script>

调用正文中的图像:

<pec><a href="#" onClick="ampliar();"><img src="001.jpg" width="400" height="250" /></a></pec>
<gran id="granderizable" ><a href="#" onClick="ampliar();"><img src="001ZOOM.jpg" width="1280" height="800" /></a></gran>

函数ampliar在body中查找id为granderizable的Html元素，并更改其样式显示值(显示或不显示)。

单击任何图像时会激活此功能。当点击pec(小 View 图像)时，它会显示gran。这张图片较大，与小图片重叠。再次点击它会改变其显示值并将其从应用程序用户的 View 中消除，从而使他能够看到之前的小 ImageView 。