CODEWITHSUNDEEP
htmlcss
user14138323
user14138323

Reputation:

How to disable all zoom on mobile safari?

I have browsed through multiple StackOverflow questions, multiple web tutorials and not one has helped one bit. I am working on a web game, and it's not working at all. I haven't tried any JS solutions because they all require jQuery. I'm honestly frustrated out of my mind at this point and need an answer.

How can I disable ALL zooming? Not JUST double tap. Not JUST normal zoom. All zooming needs to be disabled!

Here's some examples I've tried, yet do not work for me:

touch-action: ______;

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

<meta name="viewport" content="width=device-width,user-scalable=___"/>

Please help! If you have any answers other than the ones listed above, then please let me know! I'm out of options at this point and need a solution!

Upvotes: 0

Views: 4191

Answers (2)

Ninos
Ninos

Reputation: 229

The meta viewport does NOT work for sure, so stop bothering. This is the ONLY thing that works

body { touch-action: pan-x pan-y; }

But, make sure NOT to have 'touch-action' anywhere else, nor 'overflow', otherwise it won't take effect. I had overflow-y in another element and that suppressed the effect of 'touch-action', and drove me crazy all day until I found it.

And this works for all phones, not just iPhone.

Upvotes: 0

Marvin Xu
Marvin Xu

Reputation: 369

Try this

body {
  touch-action: pan-x pan-y;
}

Information I know

  • iOS Safari doesn't respect the user-scalable=no meta tag since iOS 10
  • touch-action: pan-y is supported since iOS 13
  • If you want to disable zooming between iOS 10~12, you can use preventDefault, but it doesn't work perfectly
document.addEventListener('touchstart', e => {
  if (e.touches.lenght > 1) {
    e.preventDefault()
  }
}, {
  passive: false
})

This will only work when you pinch with two fingers simultaneously, if you move with one finger first and then use another for pinching, it fails.

Upvotes: 3

Related Questions