[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1920
  • 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
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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