[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1883
  • Last Modified:

How to enable pinch to zoom using jQuery Mobile?

Experts,

I'm using jQueryMobile to build a mobile friendly page. All of my elements are working wonderfully across the many different devices I've tested but, I've not been able to enable pinching to zoom-in or out.

Does anyone know how I can do so with jQueryMobile or some other add-on to accomplish this? I'd like to enable the entire site to be pinchable but, if that is not possible, at least on some images.

Thoughts? Methods?
0
evibesmusic
Asked:
evibesmusic
  • 5
  • 4
2 Solutions
 
GaryCommented:
This is a feature built into the phone - it's not something you need to program
Unless you are disabling it with user-scalable=no in your meta tags?
0
 
evibesmusicAuthor Commented:
@GaryC123:

Understood. I guess what I don't understand is that when I know a device like the iPad supports pinching, the mobile page still does not zoom? Is this due to browser settings?

Notes: The page that I am building is not an app. It is a mobile optimized web page.
0
 
GaryCommented:
Can you post the html headers here (meta tags)
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
evibesmusicAuthor Commented:
@GaryC123:

Only two meta tags:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
0
 
GaryCommented:
Can you post the site link?
What phone are you testing on? What OS version?
0
 
evibesmusicAuthor Commented:
@GaryC123:

Sorry but, the site is behind my company's firewall.

I've been testing on iOS 6 and 7 for both the iPhone and iPad.

I've also been testing on Android 3.2 and 4.0.
0
 
GaryCommented:
Add this into your scripts


$(document).bind('mobileinit', function(){
       $.mobile.metaViewportContent = 'width=device-width, minimum-scale=1';
});
0
 
evibesmusicAuthor Commented:
@GaryC123:

Added to my scripts. No change. I guess it is not a huge deal seeing that jQM auto-sizes elements to meet the needs of each device but, just odd.
0
 
evibesmusicAuthor Commented:
@GaryC123:

I've still not figured out how to enable the pinch to zoom function but, it is not needed...would just be nice to have. I am going to close this question and award you points based on your suggestions.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now