Disabling pinch and zoom on mobile devices

Sorry if this comes over as a bit over-bearing but I think its an important point to make. :wink:

Then it is impossible for us to say whether the fix was in fact working and you were just viewing a cached version without the change or if there was perhaps a typo. I’ve lost count of the number of times someone has said the code isn’t working only to find it wasn’t implemented correctly so I like to see at first hand when a solution doesn’t work. It also helps to point in the right direction if the code does fail as that avenue can be eliminated.

Here is the tag in a demo page showing that it cannot be pinched and zoomed in ios.

http://www.pmob.co.uk/temp2/no-pinch.html

I’ve looked again at your page and I can’t seem to replicate the problem you are addressing so please provide a screenshot of the problem in action in case we are talking about different things :slight_smile: I know android devices handle these things differently but it may not be possible to counter some native actions.

Here is a screenshot from the iphone showing how the form looks when filled in.

As you can see it’s not automatically zooming but you should also take heed of the comment I made about your page not fitting on mobile because some elements are too wide and this in itself can cause scaling problems on mobile. This should really be the most important issue that you need to address first!

You are of course free to do what you think fit and I can only offer expert opinion from those involved in this industry.

http://adrianroselli.com/2015/10/dont-disable-zoom.html
https://twitter.com/zeldman/status/651114499290697728

And lastly from the html5 specs themselves:

https://www.w3.org/TR/2017/WD-html52-20170117/document-metadata.html#the-meta-element

Warning
<meta name="viewport" content="..."> allows authors to define specific viewport characteristics (such as the layout viewport’s width and zoom factor) for their documents. Among these is the ability to prevent or restrict users from being able to zoom, using content values such as user-scalable=no or maximum-scale=1.0. Authors should not suppress or limit the ability of users to resize a document, as this causes accessibility and usability issues.

The following examples illustrate code that should be avoided:


<!-- DO NOT DO THIS -->

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

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

There may be specific use cases where preventing users from zooming may be appropriate, such as map applications – where custom zoom functionality is handled via scripting. However, in general this practice should be avoided, and HTML conformance checking tools should display a warning if they encounter these values.

Note that most user agents now allow users to always zoom, regardless of any restrictions – either by default, or as a setting/option (which may however not be immediately apparent to users).

There are use cases for disabling zoom but to disable sitewide on a website is simply bad practice. Don’t take my word for it just google the experts.:slight_smile:

5 Likes