11

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?

Henrik Ammer
  • 1,889
  • 13
  • 26
hjuster
  • 3,985
  • 9
  • 34
  • 51
  • 1
    I read somewhere that setting minimum-scale to 0 can fix the problem, but that didn't do anything for me... – hjuster Sep 12 '12 at 16:39
  • Isn't zooming on by default? Without the viewport? Or do you not want the page to scale at first load and therefor use the viewport? – Henrik Ammer Sep 12 '12 at 17:50
  • I want to load the page at 1.0 zoom level and just to be able to zoom in/out, which i can't with or without meta tag. Any ideas what can cause this issue? – hjuster Sep 12 '12 at 17:54
  • No, sorry. I don't have any iOS device, and it works on my Android phones browser. Have you tried a simple test page with just text and the above meta tag and see if it works on iPad and iPhone? If it does, my money is on that somewhere in your javascripts (like the move mouse and move background script) something is blocking their touchevent. Try capturing a touchevent, see [http://stackoverflow.com/a/4755579/600101] for help. – Henrik Ammer Sep 12 '12 at 17:57
  • Henrik, you have just won the bet! :) – hjuster Sep 12 '12 at 20:07
  • I'll add it as an answer so you can close the question later. – Henrik Ammer Sep 12 '12 at 20:15
  • No, sorry. I don't have any iOS device, and it works on my Android phones browser. Have you tried a simple test page with just text and the above meta tag and see if it works on iPad and iPhone? If it does, my money is on that somewhere in your javascripts (like the move mouse and move background script) something is blocking their touchevent. Try capturing a touchevent, see https://stackoverflow.com/a/4755579/600101 for help. – Henrik Ammer Sep 12 '12 at 20:15

1 Answers1

33

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"/>
Ilan Kleiman
  • 1,149
  • 5
  • 18
  • 36