Published 1 week ago — 1 minute read

Preventing page zoom on iOS when double tapping

Snippet CSS

On a recent project I had created a selector that allowed you to plus or minus through a list of quotes.

This was an action most users would be doing and by default iOS Safari will zoom in the page when double tapping. By quickly moving through the quotes the user would have the page zooming in and out.

A quick 'fix' for this is to change the touch-action property on the body:

body {
  touch-action: manipulation;

A few years ago you could set the viewport meta tag to prevent the user from having the ability to zoom, but this has since been removed (and isn't best practice).

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