如何对图像进行捏合/缩放

发布于 2024-12-10 13:18:36 字数 1466 浏览 0 评论 0原文

我仍在学习 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>

非常感谢您的帮助。非常感谢。

-鲍勃

原文

I am still learning the tricks to jQuery mobile and have been having a problem with the zooming in and zooming out of a picture/image on a data-role="page." Is there a way to make the pinch/zoom work on an image on the iPhone using jquery mobile? Cant get it to work on the iOS Simulator. Here is my code.

<!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>

Thanks so much for your help. Much appreciated.

-bob

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

兰花执着 2024-12-17 13:18:36

使用此编辑元标记中的“视口”

<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" />

edit the "viewport" in meta tag with this

<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" />

回复收藏 0 原文

红颜悴 2024-12-17 13:18:36

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

关注此查看如何启用捏合功能在 JQM iOS 上进行缩放（您使用 PhoneGap 并不重要）。

希望这有帮助。

当 jQuery Mobile 渲染页面时，它会将以下元标记添加到
文档的头部。

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

它是minimum-scale=1、maximum-scale=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'; 
});

It's the viewport metadata property that controls those settings.

Follow this to see how to enable pinch & zoom on JQM iOS (shouldn't really matter that you are using PhoneGap).

Hope this helps.

When jQuery Mobile renders a page, it adds the following meta tag to
the head of the document.

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

It is the minimum-scale=1, maximum-scale=1 part of
the tag which disables the pinch zoom. What we need to do is modify
the $.mobile.metaViewportContent variable. We can do this using the
following code.

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

If we want to restrict the amount of zooming, we can use the following:

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

回复收藏 0 原文

~没有更多了~

关于作者

荒人说梦

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

如何对图像进行捏合/缩放

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

醉城メ夜风

远昼

平生欢

微凉

Honwey

qq_ikhFfg

友情链接

如何对图像进行捏合/缩放

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

醉城メ夜风

远昼

平生欢

微凉

Honwey

qq_ikhFfg

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。