How to enable pinch zoom on website for mobile devices?

html viewport mobile-devices
hjuster picture hjuster · Sep 12, 2012 · Viewed 43.5k times · Source

I am trying to enable pinch zoom on my website. I've tried to enable zooming by setting meta viewport like this but without any success.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.0, minimum-scale=1, user-scalable=yes"/>

Any ideas why my site is still not zoomable on ipads and iphones?

Answer

Ilan Kleiman picture Ilan Kleiman · Sep 7, 2013

This may be a bit late seeing that it has been answered almost a year ago... Although I tried your meta tags on my HTML page of my IOS app. The tags didnt really let me zoom out, and barely let me zoom in, and when I would zoom, it would revert back to its original size.

Now I was able to zoom out all the way, and zoom in a "a lot" and it would hold the zooms with these meta tags:

<meta name="viewport" content="width=device-width, initial-scale=.5, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes"/>

Related questions

How do you disable viewport zooming on Mobile Safari?

I've tried all three of these to no avail: <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; …

Read More
HTML5 Canvas 100% Width Height of Viewport?

I am trying to create a canvas element that takes up 100% of the width and height of the viewport. You can see in my example here that is occurring, however it is adding scroll bars in both Chrome and FireFox. …

Read More
How to set viewport meta for iPhone that handles rotation properly?

So I've been using: <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/> to get my HTML content to display nicely on the iPhone. It works great until the user rotates the device into landscape mode, where the display …

Read More