html safari disable zoom

Maker's Aid

How to Stop Safari From Auto-Zooming on Input Fields

No more zooming, no more problems. Here’s how to prevent Safari from auto-zooming on forms on iPhone.

If you have an input field on your website with a font size of less than 16 pixels, Safari on iPhone considers the text too small to read and automatically zooms in on the form field when the user taps on it.

While I appreciate the idea behind this feature, Google Analytics reports and Microsoft Clarity session recordings from my websites show that it also surprises and sometimes frustrates iPhone users as they don’t expect it.

So if you don’t disable it, it can have a negative impact on your form’s conversion rates (and, as a whole, your website’s engagement rates).

The question is how to do it…

Add a Viewport Meta Tag

The quickest and easiest way to stop Safari from zooming in on input fields with small text on iPhones is to add a <meta name="viewport"> tag with the following attributes and properties to your website’s <head> section:

Many years ago, Apple invented the viewport tag to give web developers more control over the way that their websites got rendered on iPhones. Nowadays, every browser supports the viewport tag—and having one has become the norm for usability on mobile devices.

The “viewport” is the part of the window where the content can be seen at any given moment of time. You can use the viewport meta tag to control the width and the scale of the viewport to make your website more user-friendly for users on phones.

Coincidentally, you can also use the viewport meta tag to disable Safari’s not-always-desirable auto-zoom on iPhones.

In the viewport meta tag above:

width=device-width sets the width of the page to the same as the width of the device’s screen.

initial-scale=1 sets the initial zoom of the page to 1.0 of that width, or no zoom at all.

maximum-scale=1 fixes the maximum scale of the page to 1.0. This prevents Safari from auto-zooming while still allowing the user to zoom in manually.

Change the Text Size of Input Fields

Alternatively, if you’re fine with using fixed (and not relative) font size in your CSS stylesheet, you can set the font-size property of all input fields to 16 pixels or bigger:

You can also do this through CSS inheritance:

The two examples above apply to all input fields. If you want to style a specific input field, use one or more the following CSS attribute selectors:

input[type="date"]
input[type="datetime"]
input[type="month"]
input[type="week"]
input[type="time"]
input[type="number"]
input[type="range"]
input[type="text"]
input[type="url"]
input[type="search"]
input[type="email"]
input[type="tel"]
input[type="password"]
input[type="button"]
input[type="checkbox"]
input[type="radio"]
input[type="file"]

After setting the font size of these inputs to 16 pixels or bigger, you should no longer be able to observe the auto-zoom problem on Safari on iPhones.

My IPhone was disabled due to Safari Zoom. The text was so large that I couldn’t even get into my phone.

Not a great idea for Accessibility (for people with low vision) to add “maximum-scale=1”, read more here: https://www.a11yproject.com/posts/never-use-maximum-scale/ and https://dequeuniversity.com/rules/axe/4.4/meta-viewport

André Elmoznino Laufer you are pointing to an article from 2013 that was fixed in 2019. In current browsers user still can zoom if you don’t set user-scalable to ‘no’. ‘maximum-scale=1’ only prevents auto zoom shenanigans

Good point Maksim

You would go through the work of disabling an accessibility feature instead of making your forms better?

How to Disable Zoom on a Mobile Web Page With HTML and CSS

The zooming option is not always helpful. One of the most common inconveniences both developers and users face is the zoom on mobile applications, especially when you are developing a game. However, disabling the zooming option is becoming a common mistake for many situations and we don't recommend it for most of the web pages as zooming can help accessibility for many users. Imagine someone with vision-related disabilities trying to read a text on your website. By the way, if you're sure about what you're doing and you want the zooming option to be blocked anyway, here we include some ways to do so.

To disable the zooming option, you can use the Surefox browser, but still, the page will zoom in and out by double-tapping on the screen, so you’ve better try the methods suggested by HTML and CSS .

How to disable zooming with HTML

The most common way of disabling the zoom is using the HTML <meta> tag. The user-scalable attribute allows the device to zoom in and out. You should define the "no" value for this attribute in order to disable the zooming option. It must look like this:

You should consider, however, that when you want to disable user scalability for a web page, first you'll need to ensure the page is fit to the device viewing it. So it is very common to use this attribute along with the initial-scale and maximum-scale attributes. Now let’s try an example to make it clearer.

Example of disabling the zoom on <p> tags:

Example of disabling the zoom on <img> tags:, how to disable the zoom with css.

We saw a HTML solution to completely disable zooming on web pages in the previous section. We also mentioned the downsides, and now you know that the HTML option doesn't work for iOS Safari. Most of the times, however, we don't really want to disable zooming altogether, we just want to disable certain zoom options that damage user experience. One of the most common situations is the <input> elements' automatic zooming.

To prevent the automatic zooming on input elements, it's enough to set CSS font-size property to 16px or higher.

It will look like this:

Example of disabling the zoom with CSS:

You can also try the following:

Example of disabling the zoom:

Related resources.

HTML <meta> Tag
HTML <input> Tag
CSS font-size Property
How and When to Use !important Rule in CSS
How to Scale Images and Background Images on Hover
HTML Basics
Javascript Basics
TypeScript Basics
React Basics
Angular Basics
Sass Basics
Vue.js Basics
Python Basics
Java Basics
NodeJS Basics

Disable Pinch Zoom With HTML Viewport (A Quick Guide)

Welcome to a tutorial on how to disable pinch zoom with the HTML viewport meta tag. Having some trouble with your website design on mobile devices? Is it zooming in too much, or zooming out too far? Well, here’s a quick fix.

But just what is this viewport meta thing, and what does it do? Let us explore more of that in this guide, read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/how-to-disable-pinch-zoom-in-html/” title=”Disable Pinch Zoom In HTML” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

Download & notes.

Firstly, here is the download link to the example code as promised.

QUICK NOTES

Example code download.

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

SCALING & VIEWPORT

So what’s up with the mobile browsers? Why did they intentionally break websites by allowing zoom? This section will explain the mystery and walk through some examples.

WHAT IS A VIEWPORT?

Sadly, a number of websites are still not made for small-screen mobile devices. In order to make these non-mobile-friendly websites look as good as possible, the only way is to scale them to fit onto the small screen. The mechanism behind this “scale-to-fit” is called a viewport , which is a virtual screen size that the web browser creates to fit websites in. For example:

The device itself only has a resolution of 1024 X 768 pixels, but the website is 1200 pixels in width.
In order to fit the website onto the small screen, the browser will create a viewport that is 1200 X 900 pixels in resolution.
The browser may also scale the text and contents to maintain good legibility.

1) VIEWPORT BASICS

Now that you know what the viewport is, let us start from the basics of the viewport meta tag.

width is obviously used to set the width of the viewport. In this example, it is set to the native width of the device device-width .
There is also the corresponding height and device-height , but browsers will automatically maintain the aspect ratio even if we omit it.
As some of you sharp code ninjas may have guessed, initial-scale is used to control the level of scaling when the page is first loaded. A larger initial-scale will mean “more zoomed in”. For example, initial-scale=2.0 will mean 2X zoomed-in.

Lastly, please take note that screen resolution for today’s mobile devices is quite crazy, a small 6″ screen can be full HD or 2K. So even at initial-scale=1.0 , the browser is already doing some automatic scaling to maintain the legibility of the website. I.E. It does not equate to exact pixels, but “what the browser deems to be the best fit”.

2) DISABLE ZOOM WITH META VIEWPORT

The problem with the above example is that the user can pretty much pinch-zoom in and out to however much the device allows. To limit the zoom:

maximum-scale will control how much the users can zoom in.
minimum-scale will control how much the users can zoom out.
Setting width=device-width and maximum-scale=1.0 pretty much already fixed it to “no-zoom”; The minimum-scale will be the device-width by default… You add another minimum-scale=1.0 if you like.
user-scalable=no will further enforce that the users cannot pinch zoom.

3) ALLOW ZOOM IN, NOT OUT.

Congratulations, code ninja. You now know how to stop people from zooming, but there are also some considerations that you have to make. Not all people have perfect eyesight, and not everyone has big enough screens to display fonts in a legible manner. Sometimes, it is still better to allow a little wiggle room for zooming in.

EXTRA BITS & LINKS

That’s all for this project, and here is a small section on some extras and links that may be useful to you.

Use <meta name="viewport" content="width=device-width, initial-scale=1.0"> to set an initial scale of 1:1, allow users to zoom in-and-out.
Use <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> to disable pinch zoom.
Finally, <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5"> allows some space for zooming in.

LINKS & REFERENCES

Viewport Meta Tag – MDN
Responsive Design Building Blocks – MDN

INFOGRAPHIC CHEATSHEET

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

4 thoughts on “Disable Pinch Zoom With HTML Viewport (A Quick Guide)”

you do know this doesn’t work anymore right?

Didn’t know. I only tested and verified the viewport meta tag to be working on Android 8 + Mobile Chrome 88.0.4324.181 + Mobile Firefox 85.1.3 + Mi Browser + Brave Browser. Mobile Opera is the only NOPE. This has been stuck as a working draft for donkey years, so don’t expect 100% support – https://www.w3.org/TR/css-device-adapt/#viewport-meta

P.S. The meta viewport tag originated from Apple, it will be blasphemy if it doesn’t work on mobile Safari.

This has to be one of the more annoying things that websites do. If I am zooming it is because I’m trying to see something better. Disabling this useful feature can make a site become a site to avoid on mobile devices. My two cents.

Exactly why there is an example on allowing zoom in, not out. That still kind of misses the point though – The importance here is actually good responsive design, so users don’t even have to zoom.

Comments are closed.

DEV Community

Posted on Apr 11, 2021

Disabling Viewport Zoom on iOS 14 Web Browsers

I recently answered a question on Discord on how to disable double-tap to zoom on iOS browsers. I looked this problem up on Google, and most people said to use the viewport meta tag. Except that was four years ago and it seems that Safari no longer respects those tags.

Many are using Javascript to solve this, but that could be unreliable in many ways.

But now, since Safari 13, there is a way to disable viewport zooming.

What the touch-action property does is it disables all touch events going to the selected element(s) except for the value specified. So by setting the property to pan-y for the whole body, we're only letting the user pan up and down, no matter where they initiate the touch. Any other touch events, whether it be a double tap, a pinch, or even a pan left or right, will be ignored.

You can read more about the touch-action CSS property here

If you need to allow the user to pan both up or down and left or right, you can add pan-x :

If you have just pan-y turned on in your body selector, and you have smaller viewports inside your document where there will be horizontal scrolling, you can override the property value in the child element.

Fair Warning

In my testing I found out that on iOS, viewport zoom is fully disabled when the touch-action property is restricted like this. This applies even to automatic zooms that the browser performs, such as when the user taps on a text box with a font size smaller than 16px.

However, if even one element in the body has touch-action set to pinch-zoom or manipulation the browser will perform automatic zooms when tapping on small text boxes.

So be mindful of that, if you do have to enable manipulation or pinch-zoom events.

Top comments (4)

Templates let you quickly answer FAQs or store snippets for re-use.

Joined Apr 3, 2019

Awesome! This worked for me. I had a Button element that I wanted to allow a user to tap in rapid succession. On iOS, it kept zooming in, meta-tags ignored. But, your tip fixed it!

Education Politecnico di Milano
Work Software Engineer Freelance
Joined Sep 13, 2021

Hi, thanks for the article, as of ios 14.6 this method seems not to work while double-tap to zoom; pinch to zoom is blocked. Any ideas? Thanks

Location Arkansas, USA
Work Mobile Applications Developer at University of Arkansas for Medical Sciences
Joined Mar 14, 2017

Hi, just trying to clarify what you're referring to here.

Do you mean it doesn't work when the double-tap to zoom and pinch to zoom events are cancelled via Javascript?

Joined Sep 21, 2020

Thanks for the information. I was trying to find a way to handle that easily. Thanks

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Git Commit Hacks Every Developer Should Know

Otobong Edoho - Aug 20

Using CSS Clamp for Responsive Typography

Tailwine - Aug 11

Application server vs Web server

mohanapraneswaran - Aug 20

Step-by-Step Guide to Setting Up Terraform, AWS CLI, and Your AWS Environment.

Chibuzo Nwobia - Aug 19

We're a place where coders share, stay up-to-date and grow their careers.

Trending Categories

Selected Reading
UPSC IAS Exams Notes
Developer's Best Practices
Questions and Answers
Effective Resume Writing
HR Interview Questions
Computer Glossary

Prevent iPhone from zooming in web-app with HTML \n

Giving a meta tag attribute "user-scalable=no" will restrict the user from zooming elsewhere.

Prevent zooming all together by adding this meta tag to your head tag. This tells the mobile browser to use the same width scale and will not allow the user to zoom in at all, hence also disables that annoying behavior. However, some might argue that this is not a very user-friendly way to handle the problem.

The <select> element, used along with one or more <option> elements, creates a drop-down list of options for a web form. The <select> element creates the list and each <option> element is displayed as an available option in the list.

By setting the font-size of the input field to a font-size of 16px (or larger), we prevent the browser from zooming in on focus. Note that we use the device aspect ratio to set the font size of 16px only for devices which have the specified device-aspect-ratio.

Related Articles
How to launch any arbitrary iPhone application from within another app?
Exact Radius and Size of iPhone App Icons
How to prevent buttons from submitting forms in HTML?
How to prevent XSS with HTML/PHP?
Where are the app cookies stored on the iPhone?
Fun Fact Generator Web App in Python
How to Transfer Contacts from iPhone to iPhone?
How to disable zooming capabilities in responsive design with HTML5?
Best CRMs for iPhone: Which iOs app has the features you need?
How to completely fill web page with HTML canvas?
How to create AGE Calculator Web App PyWebIO in Python?
How to determine device type (iPhone, iPod Touch) with iPhone SDK?
What are all the custom URL schemes supported by the Facebook iPhone app?
How to prevent moment.js from loading locales with webpack?
Client side image zooming and rotating in Django

Kickstart Your Career

Get certified by completing the course

JavaScript is disabled in your browser. To get the best user experience on our website you should enable it :-)

How to Quickly Disable Auto Zoom on input elements (iOS)

If you use the most common HTML viewport meta settings, clicking on an input element will automatically trigger auto zoom on iOS devices. At least on Smartphones. I’ve tested this on iPhone 4, 5 and 6, using the Safari and Chrome browser. Based on my research it’s the same for all iOS devices.

This HTML code is what allows the auto zoom effect to happen:

But this auto zoom effect is far from always desirable. Sometimes it will hurt the usability of your web app. It totally depends on the context.

To disable this effect on both Safari and Chrome, you can use the following instead:

The only new code is that we added the value maximum-scale=1 to the meta content attribute.

This does not disable the option of manually zooming in and out, in Safari. It only disables the auto zoom function.

But in Chrome’s mobile browser (on iOS devices), it does disable the manual zoom option. This might be a problem, depending on your use case.

I haven’t found a pure HTML solution yet that allows you to keep the manual zoom in Chrome. If I do I’ll update this article.

A much simpler solution

If you give your input elements a minimum font size of 16px, as opposed to the default 11px, this will remove the auto zoom effect on both Safari and Chrome. At least it did in my tests.

With this method, you can avoid adding the maximum-scale-1 value to your content attribute and thus avoid restricting manual zoom in Chrome

Wait, why didn’t you suggest this solution first?

Well, you might not want to use a 16px font size on all your input fields on mobile. This will force you to adapt your mobile UI’s typography to accommodate your input fields.

And as with pretty much anything, this issue can be worked around programmatically by using JavaScript, but that’s beyond the scope of this article.

Also, beware that restricting your users from zooming is in general not adviced. More info at W3Schools. But again, it depends on the context.

It would be nice if there was a simple setting that could address this issue across all devices at once. If you have any insight on this topic, feel free to let me know in the comments section below :-)

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Share & Discuss on

Stop iPhones From Zooming in on Form Fields

Preventing iphone form zooming.

Keeping up with browser functionality as a website programmer can be an arduous task, but when the operating system also contributes to the mess there’s often nothing that can be done. Recently a client asked if it was possible to prevent iOS zooming in on the input fields of their website. They’d been told it wasn’t possible due to it being an iOS problem, but fortunately a solution (or three) is available.

In layman’s terms the issue itself is that when you click on an input or select field the default view zooms in so a full width field transforms itself as per the image below. You will notice you can no longer see the full field and this becomes a problem if there are placeholders or descriptions alongside the fields.

Three Possible Solutions to iPhone Input Field Zooming

Using meta tags to prevent form zooming.

The first method in which to prevent form input zooming is to add a meta tag (or edit the existing one) in your site’s header area. Add the following meta tag and the zooming is prevented via a maximum scale directive. This is the correct way to do things if you want to disable zoom entirely, but sometimes plugins (mainly SEO related ones) and the like can overwrite this, and you may not want to disable the zoom feature. < meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/> If this still doesn’t work for you, it’s possible that it’s being overwritten programmatically, but there may be another simple fix that does the job.

Simple CSS to Fix Form Zooming

Using CSS, simply set your BODY font size to 16px, and then use CSS again to set the INPUT and SELECT field font size to 1em OR 100%. For example; body { font-size: 16px; } input, select { font-size: 100%; }

Advanced iPhone CSS Fix for Form Input Zooming

Here’s where things get a little more complicated if you want them to. The following CSS caters for each and every iPhone (since this is where the problem originates from), and is scaled to fit each specific device. /*** iPhone and iOS Form Input Zoom Fixes ***/ /* Fix Input Zoom on devices older than iPhone 5: */ @media screen and (device-aspect-ratio: 2/3) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"]{ font-size: 16px; } } /* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */ @media screen and (device-aspect-ratio: 40/71) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"]{ font-size: 16px; } } /* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7 */ @media screen and (device-aspect-ratio: 375/667) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"]{ font-size: 16px; } } /* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max */ @media screen and (device-aspect-ratio: 9/16) { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"]{ font-size: 16px; } }

About the Author: Warren Chandler

21 Comments

what about input[type=”tel”] ?

This fixes the zooming really great but doesn’t entirely solve my problem. Just fixing for the zooming breaks your design if you are using a font size not 16px. For other non iOS browsers (even Safari on apple desktops) if your design calls for a different font size it works as expected; however, it causes the zooming glitch on the iPhone. setting all your input fields to 16px is not really a real world solution this is a glitch in the iPhone that really needs to be fixed by Apple, inputs pull up a keyboard or popup selection box so there is no need for iPhone to automatically zoom. or if it does then Apple should have the common courtesy to zoom back to the original zoom factor once the input has been entered or selected.

Thx. Work for me. IOS 12

Where to put this code?

It depends on your theme, but you’ll need to add it to either your header.php if you’re using the META method, or your styles.css file for the rest.

Really it’s works for me too:) The people who have newer version of safari like 13.3 or Newer version. They should have to add ‘!important’ then it will be works for all.

Here is another all-encompassing way, if you just want to make sure all touch devices are targeted:

@media (hover:none) { /* start mobile styles */ select, textarea, input[type=”text”], input[type=”password”], input[type=”datetime”], input[type=”datetime-local”], input[type=”date”], input[type=”month”], input[type=”time”], input[type=”week”], input[type=”number”], input[type=”email”], input[type=”url”]{ font-size: 16px; } /* end mobile styles */ }

Worked like a charm! Thank you so much. It was driving me crazy trying to figure out how to get the iPhone to stop zooming in.

The only real viable solution is making sure your font-size is not smaller than 16px, the meta tag prevents users from zooming in on a page and is bad for accessibility and usabilty.

You might want to add: input[type=”tel”]

That way it will also work on phone number fields.

Or just make the text larger so people can see it? The zooming behavior is because it’s too small for some users.

Zooming in is fine but it is doesn’t zoom out when you click “done” and it should.

Thank you for this article. increasing the input field font-size to 16px it did solve my issue.

Thank you, I used thefirst option and it worked

As an Accessibility champion, this zooming is happening because your form isn’t Accessible. While it seems like Apple should have the zoom only happen on the input, and therefore unzoom when the user is done, they’re making the point that your form fonts are too small. And, if you don’t make them bigger, they’re making your experience suffer…just like it does for people with sight impairments. Keep in mind that anyone who needs reading glasses qualifies as benefitting from larger fonts, which is pretty much everyone over 45.

In my case the site was using fluid typography and a smaller width screen size made the input’s font-size defined with rem actually render below 16px.

A more robust fix would be to honor whatever font size they’ve set unless it dips below 16px by repeating the font-size property and using max() which has been supported by Safari since iOS 11.3. We repeat the font-size property so that if the browser doesn’t understand max() it will use the one listed before it.

input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="phone"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], select, textarea { ... font-size: 1.1rem; /* Browsers that don't understand the following max() will use this */ font-size: max(1.1rem, 16px); /* Lucky for us, Safari iOS understands max() */ ... }

First option worked for me

Trank you for This. I searching so Long for the Solution.

I’m happy this helped, Tony. All the best :)

How do I stop safari from zooming on text fields while using random websites?

I guess this is a method when designing your own website but I want the auto zooming to stop when I type on a field while normally using different websites.

Please help

Sadly that’s down to the website programmer to fix. I’m not entirely sure there’s anything you can do unless you happen to work for Apple’s browser division. :)

How to disable zoom on a mobile web page using CSS?

To disable the zooming option with the multi-touch gesture we can use surefox browser but still, a user can zoom in or out by double tapping on the screen. We can use the <meta> tag to disable zoom in and out on a mobile web page. Syntax:

Steps to implement on mobile browser:

Download opera mobile emulator
Install the downloaded file, and run the emulator.
Choose your device preferred devices from the list.
Drag your file into that emulator to run the non_zoom-able file.

Non-zoomable Example:

Zoomable Example:

Example: This example uses user-scalable=no to disable zoom on mobile web page.

Output:

Example 2: This example uses user-scalable=no to disable zoom on mobile web page.

Please Login to comment...

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Input zoom on iOS Safari

When focusing an input in iOS Safari, the whole web page will zoom by default. This is a common behavior in Safari. It's annoying, since when zooming the page, it won't zoom out as the input is no longer focused.

The solution is fairly simple, which is to add font-size: 16px to the input.

By the way, zooming in is a good thing. Some users might prefer to see what they're typing in a large text, but what annoys me personally is that Safari only zoom-in, and left the user figure out themselves to zoom-out. That's why I would prefer to reset that early on.

Previous Default flexbox stretching
Next Button minimum width

Support Defensive CSS

Do you like the content? You can buy me a cup of coffee . Thank you!

About the author

Ahmad Shadeed

Ahmad is a UX designer and front-end developer from Palestine. He enjoys working on challenging design and front-end development projects. He wrote a book on debugging CSS , writes extensively on CSS , Accessibility , and RTL (right to left) text styling .

how to disable pinch zoom effect on safari browser ?

Typically I'd add some CSS to the body: touch-action:pan-y;

We have to do a bunch of this to prevent webgames getting zoomed or in a position where they can't be zoomed back out again - though currently in landscape ios15 it doesn't seem to fully work as expected.

How can I "disable" zoom on a mobile web page?

I am creating a mobile web page that is basically a big form with several text inputs.

However (at least on my Android cellphone), every time I click on some input the whole page zooms there, obscuring the rest of the page. Is there some HTML or CSS command to disable this kind of zoom on moble web pages?

@marcuslui99 .,

Thank you for posting in the Zoom Developer Forum. This forum is intended for questions and guidance related to Zoom Developer tools. Could you please clarify if you are working with one of Zoom’s SDKs?

Web Accessibility Tips: Don't Disable Zooming (Yes, Even On Mobile)

If your users can’t zoom in on your content, you’re probably making a mistake. Zooming (or scaling) is common, expected user behavior, and in general, you shouldn’t prevent your users from adapting your content to their preferences.

In this article, we’ll discuss the methods that developers use to disable zooming — and how those techniques can cause unnecessary frustration for people with disabilities.

For many users, zooming is helpful for accessibility

People who have vision-related disabilities may scale content to make text more readable, and people with certain neurocognitive differences may use the same approach to focus on a single line or paragraph.

When zooming is disabled, these users are forced to find other ways to read your content. Some people might take screenshots, while others might use dedicated screen magnifier applications. Needless to say, most people would prefer native accessibility. You don’t want to force your users to download software or use complicated workarounds to view your website.

Zooming shouldn’t be disabled with HTML in most circumstances

The HTML meta tag attribute "user-scalable=no" can restrict users from zooming, which may be defensible in certain situations. For example, if you’re building a web game or desktop-like application, zooming might detract from the user experience.

More commonly, developers disable zooming to fix presentation issues. The user-scalable tag is usually paired with additional markup that renders the page at the width of the device while preventing zooming. For example:

In this example, “maximum-scale=1" is also intended to disable scaling. By setting the value at 1, the tag essentially prevents the user’s viewport from changing.

Both tags are overused, and as a result, many desktop browsers ignore “user-scalable=no” and “maximum-scale=1" by default. Mobile browsers may support these tags to various degrees: iOS Safari ignores these tags, but at the time of writing, both methods still work on Chrome on Android.

Related: How CSS Benefits Accessibility

What about auto zoom on input tags?

Developers frequently misuse the “user-scalable" tag to prevent mobile browsers from automatically zooming in on text input fields. This seems like a logical place to disable zooming — but there’s usually an alternative.

One common workaround: Providing form input elements with a minimum font size of 16px prevents most mobile browsers from scaling form elements by default. This method requires some work with your website’s CSS, but it avoids restricting manual zoom.

Related: Make Your Digital Media More Accessible By Providing Options

Can you conform with WCAG while disabling scaling on your website?

The Web Content Accessibility Guidelines (WCAG) is widely considered the international standards for digital accessibility. Most websites should aim for Level AA conformance with the latest version of WCAG, which means following all Level A and Level AA success criteria ( read more about WCAG Level A, AA, and AAA ).

WCAG Success Criterion 1.4.4, “Resize Text," requires that text can be resized without assistive technology up to 200% without the loss of content or functionality, with exceptions for captions and images of text.

By disabling zooming, some websites fail this criterion. While it’s possible to disable scaling while fulfilling this requirement in other ways — for example, by providing an on-site control for changing the scale of the page — the simplest way to follow the guideline is to build a responsive website that allows scaling.

Related: Does WCAG 2.1 Require Responsive Design?

Don’t prevent your users from adapting your content to their preferences

People with disabilities use a wide variety of techniques to adapt content to their preferences. When you restrict them from performing certain actions — such as scaling your website to make it readable — accessibility suffers.

In most situations, there’s no good reason to prevent zooming. You can often use CSS to achieve a visual aesthetic without creating unnecessary limitations, which accommodates a wider variety of users.

For more guidance, send us a message to connect with an accessibility expert.

Subscribe to Blog

Free Industry Accessibility Analysis of Your Website

Most recent

Knowing is half the battle (722)
Insider (517)
Accessibility UX (398)
Accessibility Requirements (377)
Human Interest (358)
Accessibility Guidelines (342)
People with Disabilities (278)
Defining Terms (186)
Industry News (141)
Lawsuits & Settlement (111)
Government (101)
ADA Title II&III (97)
Employment (32)

Use our free Website Accessibility Checker to scan your site for ADA and WCAG compliance.

Related posts, recent posts, worried about web accessibility lawsuits start here., will generative ai improve digital accessibility, how accessibility can help you grow your web design business, stay current on digital accessibility news weekly by subscribing to our blog., not sure where to start.

Start with a free analysis of your website's accessibility.

Bureau of Internet Accessibility 5600 Post Road #114-274 East Greenwich, RI 02818
[email protected]

Get In Touch

A rather geeky/technical weblog, est. 2001, by Bramus

Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS only)

UPDATE 2017.12 : For non-Safari browsers (e.g. Chrome, Firefox) you can use overscroll-behavior to solve exactly this. Simply apply overscroll-behavior-y: none; on html, body and be done with it.

Safari however does not support it …

UPDATE 2021.06 : The workaround below no longer seems to work in recent iOS/MobileSafari versions (iOS 12+) … 😭. Follow Webkit bug #176454 to stay up-to-date on support in Safari.

Know this bouncy overscrolling behaviour that browsers have been doing whenever you reach the “edge” of the page its contents?

Sometimes – in fullscreen apps for example – you’ll want to disable this. Now, there’s no need to resort to JavaScript and hijack touchstart , as the little CSS snippet below can prevent the rubber band scrolling:

Tested with iOS8, iOS9, and iOS10.

However, this snippet disables *all* scrolling on the body . If you want to retain scrolling on your page (but now without the overscroll effect) , you need to make use of a scrollable wrapper that spans the entire window/screen and which wraps around your entire content. Like so:

You’ll most likely want to remove the margin and padding from the body too in that case 😉

Note that your mileage may vary. Other pure CSS solutions do exist (untested though)

🔥 Like what you see? Want to stay in the loop? Here's how:

Follow @bramus on Twitter
Follow @bramus on Mastodon
Follow @bramusblog on Twitter
Follow bram.us using RSS

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997) , he fell in love with the web and has been tinkering with it ever since (more …) View more posts

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

30 Comments

Not good enough.

Don’t know what you’re talking about this worked fine for me

body, body {} what does it mean, is it a mistake

A mistake indeed. Should’ve been html, body

Worth pointing out that this prevents *any* scrolling when viewed in a browser.

That’s correct. I’ve updated the post to include instructions to using a scrollable wrapper around your content. That way overscroll on the body is prevented, but scrolling of the content is maintained.

Any way to make this work with a site that’s been “Added to Homescreen”?

I can’t seem to find anything :[

This should work fine for a PWA. At least on ios 13 it is working perfect

While this works fine for a web page in a browser, it doesn’t seem to help with a Cordova hybrid app.. When I run my app, it’s almost like the WebView component itself is scrolling as opposed to something within the “html” element. I confirmed this by selecting the “html” element in VS2015’s DOM Inspector and watching the location of the DOM highlight while scrolling.

All the solutions I’ve found end up disabling momentum scrolling completely, which results in another issue where iOS can’t scroll a page if the tap-drag starts on an “input” field.

So, does anybody know of a way to get around this?

Does anyone agree that iOS is absolute garbage for this!!

Now all my absolute elements bounce like hell :))

Pingback: Customizing Pull-to-Refresh and Overflow Effects with CSS’ overscroll-behavior | Bram.us

thanks a lot. worked perfectly for me

thanks works perfect

i did following this guide but it still have bouncing effect when scrolling to bottom or top viewport ?

Pingback: Scroll Bouncing On Your Websites - ugurak

this destroys the whole website you dumbass

Not if you know what you are doing … or if you’ve read the entire post …

Thanks, It worked perfectly for me on chat page:)

Because you didn’t give position relative to their father’s elements.

Best answer. it worked for me.

What if content is more than 100vh

Pingback: 如果使用-webkit-overflow-scrolling，有时div滚动会冻结|ios问答

This works for me, but it creates some scrolling lag (in osx safari at least) sooo…no good 🙁

Thank you so much, it works as expected

This works but since the body is no larger than the screen size, the address bar will not minimise when scrolling down, not important for a lot of people but I’m working on a webapp and I realised this halfway through

It’s a shame we still need to fiddle with non-working workarounds for this in 2021. There is a standard CSS property out there, implemented by actually all other browser vendors but Apple simply refuses to adopt it…

I could not agree more.

Perhaps Apple deliberately keeps Safari in this state so that folks are forced to use Apps on their devices.

Although, Apple is adding support for overscroll-behavior in Safari 16 but this solution works for older Safari versions. Thanks!!!1

I will write my solution, I hope my method will help many people.

Css: html{ overscroll-behavior: none; } body { overflow-y: scroll; }

Cancel reply.

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

Notify me of followup comments via e-mail. You can also subscribe without commenting.

This site uses Akismet to reduce spam. Learn how your comment data is processed .

You can make a difference in the Apple Support Community!

When you sign up with your Apple ID , you can provide valuable feedback to other community members by upvoting helpful replies and User Tips .

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

How to disable zoom in on Safari when tapping

I do quite a bit of work in a browser-based program which requires me to tap check boxes. Safari zooms in when I do this, and then I have to manually pinch to zoom back out and reset. I already have turned off settings > accessibility > zoom (made no difference). Any other ideas?

iPad Pro, iPadOS 13

Posted on Aug 19, 2020 5:26 AM