Home/ Questions/Q 6875273
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T04:18:05+00:00

I am still learning the tricks to jQuery mobile and have been having a

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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