How to disable pinch to zoom feature on iPhone

Hi Guys,

Today’s topic is -

How to disable pinch to zoom feature on iPhone

I’ve seen developers often asking this question “How to disable pinch to zoom feature on iPhone?” Use’s or Developers who have used Smartphones/Touch sensitive phones like iPhone, Samsung and Windows Phones might have noticed and might have also experienced one of it’s feature [Pinch to zoom]. It nothing but – to zoom anything on these device, you have to just pinch the device screen in and out to Zoom-in and Zoom-out.

How to disable pinch to zoom feature on iphone - PepFry

How to disable pinch to zoom feature on iphone

Some may want that feature and some may not want. Especially, web developers who develop web applications for iPhone might not want users to zoom beyond the normal zoom level which are set for particular devices.

For example – You have responsive website for one of the smart phone. You have a banner on top of the website. Since the banner is already optimized of web it will not have the full quality. Further – if the user starts to pinch and zoom it – the image will start to pixelate. Not only that – If the user starts zooming into the Web application – it tends to break the layout as well.  So these are the reasons the reason for which developer might want to disable the  disable pinch to zoom feature on iPhone.

Disabling the feature doesn’t mean that – it is completely taken out from the device. It is just disabled out from your particular web application.
Here is how you do it:

If you do not want your user’s scale it furthermore, i.e. if you do not want them to zoom into the page too much – then, you will have to limit them by using an additional attribute “user-scalable=no”.

user-scalable=no

This is used with a <meta> tag as seen below:

<meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=no” />

As mentioned earlier – the important thing in the above line of code is “user-scalable=no” – Which will stop users from zooming in to your Website or app.

You can apply this piece of code within your HTML document’s <head> </head> section as seen below.

<html>
<head>
<title> Document title </title>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=no” />
</head>

<body> </body>

</html>

So guys, that’s how you limit your users from zooming into your Web applications causing them to break. For a detailed article on that – Please visit this article Simple-responsive-website-for-iphone

Hope this tutorial “How to disable pinch to zoom feature on iPhone” was worth going through. Any questions regarding this? Please feel free to comment below in the comment section. I’ll be pleased to answer you!

2 thoughts on “How to disable pinch to zoom feature on iPhone

  1. Developers should never take away a user’s ability to pinch to zoom. People do this for a reason. Usually because they cannot read the text or clearly see an image or to make a button larger so that they can actually select it.

    I have an iPhone. I also have 20/20 vision and small fingers, yet I find it hard to read and access buttons. I will immediate leave a site if it does not have the ability to pinch to zoom. This is an accessibility issue. The Web Content Accessibility Guidelines (WCAG) version 2 Level AA success criteria 1.4.4 requires that sites be scalable without assistive technology up to 200%. This means that in the case of the mobile browser the browser’s pinch zoom feature must allow for zooming up to 200% without using the assistive technology zoom on the mobile device.

    • Absolutely Austin,

      You are absolutely right about that. I agree!
      People often zoom into the screens to achieve what they want to. But there are cases apart from Websites – When we consider HTML Email Newsletters – Sometimes clients want their Brand’s not to be scaled not more than something they would allow. Or in situations when it is imperative that we stop user’s stop zooming in – we can use this feature.

      I’m not against people zooming into the screens. I’ve just mentioned there is a functionality that Developer’s can use.

      Thanks for taking time to comment here!

      Thanks!
      Sumesh M.S

Leave a Reply to Austin Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">