Enabling the pinch/zoom for the iPad, iPhone while using jQuery Mobile.

Posted by Gav on 6 April 2011 | 7 Comments

Tags: , , ,

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';
});

 


Post your comment

Comments

Eddie says:

This just is insane that I can't get the whole pinch zoom to work... SOS! Im a laid off graphic designer who is creating an app for his class study! please Help!

Posted by Eddie, 27 December 2011 (1 year ago)

gevork says:

Hey, they have depreciated this viewport in 1.0Final.... Any ways to actiavte the pinch zoom on all pages?

Posted by gevork, 8th December 2011 12:34 pm (1 year ago)

gav says:

Just for anyone who is trying to get the swipeleft or swiperight events to work. Make sure you don't have e.preventDefault(); within your function. This one just caught me out for nearly half an hour.

I normally write the events for an <a> tag, then copy it across to the swipe events. Since our <a> element is a link, we use e.preventDefault();

Posted by gav, 13th August 2011 1:52 am (2 years ago)

Tatlar says:

Thanks so much - this worked for me. I made sure to put the modified mobileinit in the code *before* the main jQueryMobile library is called, as it states in the jQM docs (http://jquerymobile.com/test/docs/api/globalconfig.html)

Posted by Tatlar, 26 May 2011 (2 years ago)

gav says:

remove the \ from the post below. there shouldn't be a \ before the quotes.

Posted by gav, 11th May 2011 7:31 am (2 years ago)

gav says:

@jon - the jquery mobile code adds the meta tag to your document.

so what you need to do is include jquery, then jquery mobile & then u can modify the meta tag.


<script type=\"text/javascript\" src=\"http://code.jquery.com/jquery-1.5.min.js\"></script>
<script type=\"text/javascript\" src=\"http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js\"></script>
<script language=\"javascript\">
$(document).bind(\'mobileinit\', function(){
$.mobile.metaViewportContent = \'width=device-width\';
});
</script>

There is also a css file which you may want to use:
<link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css\" />

I\'ve used this on one site which is still under development. (remember to use the ipad or the css or js don\'t get included in my demo:
http://bossy.chillburn.com/photographers/christian-blanchard/show/advertising


Posted by gav, 11th May 2011 7:29 am (2 years ago)

jon says:

where do you put the js? and do you modify the meta tag?

just putting the js on the page doesnt work for me

Posted by jon, 5 May 2011 (2 years ago)

RSS feed for comments on this page | RSS feed for all comments