Question

我仍在学习jQuery mobile的技巧，并且在data-role =“page”上放大和缩小图片/图像时遇到了问题。有没有办法使用jquery mobile在iPhone上的图像上进行捏合/缩放？无法在iOS模拟器上运行它。这是我的代码。

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>

<meta content="width=device-width, initial-scale=1, maximum-scale=2" name="viewport">

<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site     has been configured as a mobile application. 
To configure the site as a mobile application, go to Site -> Mobile Applications ->     Configure Application Framework... -->
<script src="/phonegap.js" type="text/javascript"></script>
</head> 
<body> 

    <div data-role="page" id="page">
    <div data-role="header">
    <h1>Page One</h1>
    </div>
    <div data-role="content" style="padding:0;">    
           <img src="coffee.gif" width="320" height="480" alt="coffee">
        </div>
    <div data-role="footer">
    <h4>Page Footer</h4>
   </div>
    </div>
</body>
</html>

非常感谢你的帮助。非常感激。

-bob

Answer 1

这是控制这些设置的视口元数据属性。

Follow this了解如何启用pinch＆amp;放大JQM iOS（你应该使用PhoneGap并不重要。）

希望这有帮助。

当jQuery Mobile呈现页面时，它会添加以下元标记文件的负责人。

<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">

最小比例= 1，最大比例= 1部分禁用捏缩放的标签。我们需要做的是修改 $ .mobile.metaViewportContent变量。我们可以使用以下代码。

$(document).bind('mobileinit', function(){ 
    $.mobile.metaViewportContent = 'width=device-width'; 
});

如果我们想限制缩放量，我们可以使用以下内容：

$(document).bind('mobileinit', function(){ 
    $.mobile.metaViewportContent = 'width=device-width, minimum-scale=1, maximum-scale=2'; 
});

Answer 2

使用此

编辑元标记中的“视口”

<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi" />

如何在图像上进行捏合/缩放工作

2 个答案: