ios safari zoom disable

Rick Strahl's Weblog  

Preventing iOS Textbox Auto Zooming and ViewPort Sizing

If you've build mobile Web applications that need to run on iOS Safari and on an iPhone you've probably run into the bouncing Viewport issue, which can occur when editing input fields:

• You focus on a Text Input box
• The keyboard pops up
• The remaining - now shrunk - Viewport zooms in
• The zoomed Viewport hides a bunch of content
• You type your text on the keyboard
• Hit done or click out into the Viewport

...and you find that the zoomed ViewPort state persists even though the keyboard is no longer active. IOW - the keyboard access zoomed in, but the zoomed in state is not ever released unless you:

• manually pinch and zoom back out to 100%
• double tap some empty area in the body content

Very ugly behavior and behavior that seems not uncommon in mobile Web applications (not just mine 😄) and which frankly makes for a real shitty mobile Web experience.

Even worse, the experience seems incredibly pointless. Zooming in on keyboard input doesn't seem to serve a useful purpose. After all you're not actually entering any input into the text field - you're using the pop up keyboard. If the field was too small before zooming, it would be bad UI to just display it inactively. It's likely if the input field is too small to read/view it would get fixed, but zooming into the field on input doesn't make that scenario any better. It only provides annoying behavior that doesn't even revert when input is complete. Grrrr!

The good news is that once you know what causes the problem, the fixes are quite easy to address and that's what this post is about. As so many HTML related odd behaviors that are browser specific the cause of the problem is non-obvious and not well documented so it seems like something that's just the way it works . Well - that's what I thought at least, until I looked a little deeper into the cause.

For those of you too impatient to read a long form discussion here is the bottom line to avoid iOS auto-zooming:

• Use input fields with font-size: 16px or greater
• Use maximum-scale=1 in the viewport meta tag selectively for iOS Safari

For more detail, read on...

HTML ViewPort and Sizing

Let's back up for a second. Mobile applications should set the ViewPort size in each page that displays mobile content. This can be done in the one index.html page for a typical Single Page Application (SPA) or each individual page that gets shown in a server rendered application.

The recommended setting for the ViewPort tag in a mobile capable application is:

This says that the ViewPort - ie. the main display area or body of the document - should use the available device's width, and that the initial scale is at 100% (1 is 100% as a fractional percentage) of the device's width. This results in your content sizing itself to the small mobile screen when it loads. Content fills from edge to edge regardless of the size of the screen, assuming responsive content sizing is applied.

And initially this looks totally fine with the view fitting exactly into the phone's screen width. For example:

But then you decide to click into the textbox and the popup keyboard pops up and at that point - depending on how your page is set up - things might start going awry. Here's what the above app looks like on text input:

As you focus onto the textbox, the keyboard pops up, but the entire ViewPort now zooms in resulting in a bunch of content overflowing on the right edge. This is annoying as hell, and I'd say one very common reason that many mobile Web applications can feel off and user unfriendly in behavior.

Fixing Input Zooming on Safari iOS

As is often the case in HTML there are solutions that are relatively simple to implement, but figuring out what causes the problem often is not.

The behavior we want is:

• No auto-zooming of textbox input
• All other zooming (pinch and zoom) operations to still work

As to the fixes, there are a couple of ways that this funky zoom behavior can be avoided.

• maximum-scale in the ViewPort Meta Tag (selectively for iOS)
• 16px or bigger text (easier said than done)

maximum-scale

The first solution is an easy fix for iOS, but it has to to be selectively applied to iOS or it can cause potential accessibility issues on other mobile devices.

The setting in question is to add maximum-scale=1 to the ViewPort string:

For iOS Safari (> v10) this actually fixes the problem by forcing textbox input not to auto-zoom content on focus. Despite the name and actual designed behavior of the tag - maximum-scale - on iOS you can still manually pinch and zoom and size the ViewPort larger than 100%, but it's now a user initiated operation : No more auto-zooming.

On iOS this is the behavior you want to see and this fixes the auto-input zoom problem on iOS devices. Yay!

Well... not quite so Yay! Unfortunately, Android devices treat maximum-scale as the spec recommends, so it and won't allow pinch and zoom sizing beyond the value specified in maximum-scale . So on Android with Chrome or Chromium style browser (also with FireFox Mobile), maximum-scale=1 won't manually pinch and zoom beyond the 100% bound, which is a serious accessibility problem for people that have vision impairments and depend on zooming content.

In fact, MDN recommends that maximum-scale should not be set under a value of 3 and the default is 10:

maximum-scale Controls how much zoom is allowed on the page. Any value less than 3 fails accessibility. Minimum: 0.1 . Maximum: 10 . Default: 10 . Negative values: ignored.

Arguably the Android/Mobile Chromium behavior - which doesn't 'auto-zoom' at any size - is the correct behavior: maximum-scale per spec should fix the maximum zoom size for pinch and zoom. So maximum-scale=1 shouldn't zoom beyond 100%. However, iOS Safari ignores this requirement, which can work in our favor for the selective hack described above.

At the end of the day this means that once again browsers are behaving differently depending on platform which is always a shitty proposition (echos of the 90's and 2000's).

Selective maximum-scale for Safari on iOS

Since this unwanted auto-zoom behavior is selective behavior for iOS Safari, it's possible to hack together some startup code that only selectively replaces the meta ViewPort tag in your startup code only on iOS Safari.

First make sure you have a standard ViewPort tag in your document:

Then check the browser's user agent for iPhone and add the maximum-scale parameter by replacing the content :

On iOS this will stop the auto-zooming, but still leave you will the full ability to pinch and zoom. On Android the viewport meta tag is not updated, so it continues to use the default browser behavior since it doesn't exhibit and annoying auto-zoom behavior to begin with. In both cases pinch and zoom behavior is preserved.

The advantage of this hacky approach is that nothing in the application has to change for either iOS or Android and iOS devices can continue to use smaller than 16px input fields without causing auto-zoom to kick in.

It feels dirty due to the coded nature of the fix, but it's a practical solution that works with minimal fuss and works well especially for SPA applications where this fix can be applied in one single place.

Font-Size: 16px or Greater

The proper way to fix this problem is by looking at the underlying problem which is that iOS triggers auto-zoom when the absolute, rendered text size of an input field is less than 16px . Once an input field's absolute size is 16px or larger iOS Safari no longer zooms into the field and displays it as is which is the behavior I certainly prefer.

Setting input field size to 16px or larger, is an easy way to fix the problem if you knew about this problem when you started building your app . It can be a bit more difficult to fix if you have an existing application that has input fields with smaller values or uses default font sizes smaller than 16px .

In my use case, of the application shown above I had several problems that were causing fields to zoom:

• Using Bootstrap
• Using a root size smaller than 16px (ironically 15.75px 😂)

Bootstrap default input font sizing: 1rem

Bootstrap (and other frameworks) uses default input field sizing for it's widely used form-control style as 1rem . My first inclination was trying to hunt down the base font size in form-control and overriding it. While certainly possible this breaks the CSS sizing inheritance in Bootstrap's layout so overriding form-control specifically with a hard coded value is not the best approach. Neither is updating individual fields to use 16px or larger hardcoded values.

So Bootstrap and other framework use 1rem as the base size. rem is Root Element Relative sizing, so it's based on the root element's (ie. the <html> tag) font-size.

This means the root sizing is set either by:

• A CSS size defined for the html element
• A hard coded font-size style on the <html> tag
• Don't set a root font-size which uses the browser default (typically 16px )

Personally I use the first apprach setting the base font size on the html element of my base application level CSS file ( application.css ):

If you don't have an explicit override CSS file you can also declare the size directly on the HTML element:

With either of these in place 1rem now equals 16px and assuming I use form-control in Bootstrap, my input no longer auto-zooms. Yay!

If you use Bootstrap's form-control-sm you'll fall below the 16px/1rem minimum and you end up zooming again, so you might want to avoid form-control-sm for mobile applications or ensure that form-control-sm sizing sits above the 16px minimum with form-control somewhat larger.

16px - Not as quick to Fix

Not knowing about the 16px minimum size to avoid zooming requirement, I'd been running my app at 15.75px on the html tag style in my application.css . Which then caused all input fields to auto-zoom in on iOS Safari . Silly me, right? Sometimes the fractional font-sizes sizes look a little cleaner than the rounded values.

Once I found the root cause of the 16px requirement, it still took a while to trace that down to the html root tag and font-size because - it's not exactly obvious where the root size is set if you're using a framework like Bootstrap.

And that only addressed any fields that are using form-control style which is the 'regular' font size box. Several additional input fields were using the smaller form-control-sm designation which falls below the 16px boundary and so still failed even after adjusting the root font to 16px . Luckily my base font-size of 15.75px was already close so bumping it to 16px didn't cause much of a difference. But if you used a size smaller it's quite possible that the larger base font might screw up existing layouts that now start overflowing due to the larger overall control sizes.

Another work around is to explicitly override the styles that you might use like form-control and explicitly adding the base font-size:

While that works its a bit heavy handed as that now defeats the relative sizing of controls if the base size changes. But again if you need a quick fix **just for input fields, this might work better than the root tag html document font-size .

Because the initial switch to 16px base font size, took me a while to figure and because once I did find it there were a number of broken layouts that needed fixing, my initial fix was to use iOS Safari specific maximum-scale hack, as it allowed us to continue running with all existing fields as is temporarily, until I could fix all the input field CSS classes to ensure proper sizing for the entire application.

Eventually, I was able to remove the maximum-scale hack and rely solely on the base font size fix. The point is that both solutions are useful even though the font-size fix is clearly the preferred mechanism.

Success: No iOS Zoom, Zoom

With either maximum-scale hack or the 16px minimum input field font-size in place, you now get a fixed view without any auto UI zooming on textbox input:

I'm kind of miffed that I didn't know about this sooner, because this auto-zoom behavior has been one of the reasons I've been sorely disappointed in mobile Web app behavior. All that auto-zooming and forced manual size resetting is annoying as heck. It took me so long because I assumed that was just another one of the shitty iOS HTML behaviors, without recognizing the arbitrary 16px auto-zoom boundary that isn't described in any specs and required a few deep searches on SO and some Twitter feed responses.

Which approach is Best: It depends!

As I pointed out above, in my application I actually ended up using both approaches:

• Using the iPhone targeted maximum-scale hack for a quick fix
• Using the 16px + as the permanent solution

Clearly the 16px solution is the cleaner solution of the two and if you are starting a new application from scratch you should definitely focus on that approach. While this perhaps crimps your design style (if you for some reason need smaller inputs) in general 16px , is a pretty reasonable size for a base font size for mobile applications.

The maximum-scale hack if you decide to use it should be targeted only at iOS Safari, as Safari ignores the actual scaling implied by the tag and really only affects the auto zooming behavior. Even with maximum-scale applied, iOS can still manually pinch and zoom, while Android doesn't allow pinch and zoom if maximum-scale is applied. Hence the suggestion for selective use. This selective hack is useful as a quick fix, while you take the time to properly fix input field sizes to be larger than 16px .

Nothing new or earth shattering in this post, but I didn't know about the 16px boundary condition until recently and I felt like I wanted to write this down so I would remember and easily find it next time I run into this. The auto-zoom fail in iOS is such a bad UI experience and I've run into this so often in my own as well as other third party Web apps, that it's good to be reminded...

Zoom along, but not on any text input please...

Other Posts you might also like

• Back to Basics: Non-Navigating Links for JavaScript Handling
• HTML Table Cell Overflow Handling
• A Button Only Date Picker and JavaScript Date Control Binding
• JavaScript JSON Date Parsing and real Dates

The Voices of Reason

# re: Preventing iOS Textbox Auto Zooming and ViewPort Sizing

Thank you for the solution. for me the user agent check for iphone worked like a charm in both android and ios devices

not sure if it's an update but the maximum scale trick doesn't work on iphone. The only thing that works is setting the font-size to anything greater than 16px (16px doesn't work either it has to be greater).

Just putting this here: https://gist.github.com/OysteinAmundsen/9e6b2ebdf8264ec0e25a0540661949bc

It is made for angular, but the point is:

• Select input element
• On pointerover and focus , add maximum-scale=1 to the viewport meta tag.
• On pointerout (if input element is not focussed) and blur , remove the maximum-scale=1 from the viewport meta tag.

This works if you do not want to or cannot change font-size, and do not want to or should not prevent users from zooming in the application. Zoom is only disabled when input field is in focus.

You helped me enormously. Thanks.

Great content, thanks for this.

I tried the maximum-scale approach, but if I zoom in on another page and then go to my page that gets the viewport set to maximum-scale=1 it still gets the zoom from the previous page.

I do have minimum-scale=1 set and that does work if the page had been zoomed out it will force the new page to be the right scale on load.

Thanks, mate, it was hard to find the answer to this question and only your guide includes all the required steps and details to avoid this redundant zooming.

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

Why You're Not Improving as a Developer: Common Pitfalls and How to Overcome Them

Asaba William - Apr 14

Laravel - Unlock the Power of Laravel Gates for Simplified Authorization

Muneeb Ur Rehman - Apr 14

10 Must-Have Web Development Tools of 2024: Level Up Your WebDev Game!

Mangesh Tayade - Apr 2

Lessons I learned as a Self Taught Developer

Jitendra Choudhary - Apr 14

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

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?

Leave a comment Cancel reply

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

To provide the best experiences, we and our partners use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us and our partners to process personal data such as browsing behavior or unique IDs on this site and show (non-) personalized ads. Not consenting or withdrawing consent, may adversely affect certain features and functions.

Click below to consent to the above or make granular choices. Your choices will be applied to this site only. You can change your settings at any time, including withdrawing your consent, by using the toggles on the Cookie Policy, or by clicking on the manage consent button at the bottom of the screen.

iPhone User Guide

• iPhone models compatible with iOS 17
• R ' class='toc-item' data-ss-analytics-link-url='https://support.apple.com/guide/iphone/iphone-xr-iph017302841/ios' data-ajax-endpoint='https://support.apple.com/guide/iphone/iphone-xr-iph017302841/ios' data-ss-analytics-event="acs.link_click" href='https://support.apple.com/guide/iphone/iphone-xr-iph017302841/ios' id='toc-item-IPH017302841' data-tocid='IPH017302841' > iPhone X R
• S ' class='toc-item' data-ss-analytics-link-url='https://support.apple.com/guide/iphone/iphone-xs-iphc00446242/ios' data-ajax-endpoint='https://support.apple.com/guide/iphone/iphone-xs-iphc00446242/ios' data-ss-analytics-event="acs.link_click" href='https://support.apple.com/guide/iphone/iphone-xs-iphc00446242/ios' id='toc-item-IPHC00446242' data-tocid='IPHC00446242' > iPhone X S
• S Max' class='toc-item' data-ss-analytics-link-url='https://support.apple.com/guide/iphone/iphone-xs-max-iphcd2066870/ios' data-ajax-endpoint='https://support.apple.com/guide/iphone/iphone-xs-max-iphcd2066870/ios' data-ss-analytics-event="acs.link_click" href='https://support.apple.com/guide/iphone/iphone-xs-max-iphcd2066870/ios' id='toc-item-IPHCD2066870' data-tocid='IPHCD2066870' > iPhone X S Max
• iPhone 11 Pro
• iPhone 11 Pro Max
• iPhone SE (2nd generation)
• iPhone 12 mini
• iPhone 12 Pro
• iPhone 12 Pro Max
• iPhone 13 mini
• iPhone 13 Pro
• iPhone 13 Pro Max
• iPhone SE (3rd generation)
• iPhone 14 Plus
• iPhone 14 Pro
• iPhone 14 Pro Max
• iPhone 15 Plus
• iPhone 15 Pro
• iPhone 15 Pro Max
• Setup basics
• Make your iPhone your own
• Take great photos and videos
• Keep in touch with friends and family
• Share features with your family
• Use iPhone for your daily routines
• Expert advice from Apple Support
• What’s new in iOS 17
• Turn on and set up iPhone
• Wake and unlock
• Set up cellular service
• Use Dual SIM
• Connect to the internet
• Sign in with Apple ID
• Subscribe to iCloud+
• Find settings
• Set up mail, contacts, and calendar accounts
• Learn the meaning of the status icons
• Charge the battery
• Charge with cleaner energy sources
• Show the battery percentage
• Check battery health and usage
• Use Low Power Mode
• Read and bookmark the user guide
• Learn basic gestures
• Learn gestures for iPhone models with Face ID
• Adjust the volume
• Find your apps in App Library
• Switch between open apps
• Quit and reopen an app
• Multitask with Picture in Picture
• Access features from the Lock Screen
• View Live Activities in the Dynamic Island
• Perform quick actions
• Search on iPhone
• Get information about your iPhone
• View or change cellular data settings
• Travel with iPhone
• Change sounds and vibrations
• Use the Action button on iPhone 15 Pro and iPhone 15 Pro Max
• Create a custom Lock Screen
• Change the wallpaper
• Adjust the screen brightness and color balance
• Keep the iPhone display on longer
• Use StandBy
• Customize the text size and zoom setting
• Change the name of your iPhone
• Change the date and time
• Change the language and region
• Organize your apps in folders
• Add, edit, and remove widgets
• Move apps and widgets on the Home Screen
• Remove apps
• Use and customize Control Center
• Change or lock the screen orientation
• View and respond to notifications
• Change notification settings
• Set up a Focus
• Allow or silence notifications for a Focus
• Turn a Focus on or off
• Stay focused while driving
• Customize sharing options
• Type with the onscreen keyboard
• Dictate text
• Select and edit text
• Use predictive text
• Use text replacements
• Add or change keyboards
• Add emoji and stickers
• Take a screenshot
• Take a screen recording
• Draw in documents
• Add text, shapes, signatures, and more
• Fill out forms and sign documents
• Use Live Text to interact with content in a photo or video
• Use Visual Look Up to identify objects in your photos and videos
• Lift a subject from the photo background
• Subscribe to Apple Arcade
• Play with friends in Game Center
• Connect a game controller
• Use App Clips
• Update apps
• View or cancel subscriptions
• Manage purchases, settings, and restrictions
• Install and manage fonts
• Buy books and audiobooks
• Annotate books
• Access books on other Apple devices
• Listen to audiobooks
• Set reading goals
• Organize books
• Create and edit events in Calendar
• Send invitations
• Reply to invitations
• Change how you view events
• Search for events
• Change calendar and event settings
• Schedule or display events in a different time zone
• Keep track of events
• Use multiple calendars
• Use the Holidays calendar
• Share iCloud calendars
• Camera basics
• Set up your shot
• Apply Photographic Styles
• Take Live Photos
• Take Burst mode shots
• Take a selfie
• Take panoramic photos
• Take macro photos and videos
• Take portraits
• Take Night mode photos
• Take Apple ProRAW photos
• Adjust the shutter volume
• Adjust HDR camera settings
• Record videos
• Record spatial videos for Apple Vision Pro
• Record ProRes videos
• Record videos in Cinematic mode
• Change video recording settings
• Save camera settings
• Customize the Main camera lens
• Change advanced camera settings
• View, share, and print photos
• Use Live Text
• Scan a QR code
• See the world clock
• Set an alarm
• Change the next wake up alarm
• Use the stopwatch
• Use multiple timers
• Add and use contact information
• Edit contacts
• Add your contact info
• Use NameDrop on iPhone to share your contact info
• Use other contact accounts
• Use Contacts from the Phone app
• Merge or hide duplicate contacts
• Export contacts
• Get started with FaceTime
• Make FaceTime calls
• Receive FaceTime calls
• Create a FaceTime link
• Take a Live Photo
• Turn on Live Captions in a FaceTime call
• Use other apps during a call
• Make a Group FaceTime call
• View participants in a grid
• Use SharePlay to watch, listen, and play together
• Share your screen in a FaceTime call
• Collaborate on a document in FaceTime
• Use video conferencing features
• Hand off a FaceTime call to another Apple device
• Change the FaceTime video settings
• Change the FaceTime audio settings
• Change your appearance
• Leave a call or switch to Messages
• Block unwanted callers
• Report a call as spam
• Connect external devices or servers
• Modify files, folders, and downloads
• Search for files and folders
• Organize files and folders
• Set up iCloud Drive
• Share files and folders in iCloud Drive
• Share your location
• Meet up with a friend
• Send your location via satellite
• Add or remove a friend
• Locate a friend
• Get notified when friends change their location
• Notify a friend when your location changes
• Add your iPhone
• Add your iPhone Wallet with MagSafe
• Get notified if you leave a device behind
• Locate a device
• Mark a device as lost
• Erase a device
• Remove a device
• Add an AirTag
• Share an AirTag or other item in Find My on iPhone
• Add a third-party item
• Get notified if you leave an item behind
• Locate an item
• Mark an item as lost
• Remove an item
• Adjust map settings
• Get started with Fitness
• Track daily activity and change your move goal
• See your activity summary
• Sync a third-party workout app
• Change fitness notifications
• Share your activity
• Subscribe to Apple Fitness+
• Find Apple Fitness+ workouts and meditations
• Start an Apple Fitness+ workout or meditation
• Create a Custom Plan in Apple Fitness+
• Work out together using SharePlay
• Change what’s on the screen during an Apple Fitness+ workout or meditation
• Download an Apple Fitness+ workout or meditation
• Get started with Freeform
• Create a Freeform board
• Draw or handwrite
• Apply consistent styles
• Position items on a board
• Search Freeform boards
• Share and collaborate
• Delete and recover boards
• Get started with Health
• Fill out your Health Details
• Intro to Health data
• View your health data
• Share your health data
• View health data shared by others
• Download health records
• View health records
• Monitor your walking steadiness
• Log menstrual cycle information
• View menstrual cycle predictions and history
• Track your medications
• Learn more about your medications
• Log your state of mind
• Take a mental health assessment
• Set up a schedule for a Sleep Focus
• Turn off alarms and delete sleep schedules
• Add or change sleep schedules
• Turn Sleep Focus on or off
• Change your wind down period, sleep goal, and more
• View your sleep history
• Check your headphone levels
• Use audiogram data
• Register as an organ donor
• Back up your Health data
• Intro to Home
• Upgrade to the new Home architecture
• Set up accessories
• Control accessories
• Control your home using Siri
• Use Grid Forecast to plan your energy usage
• Set up HomePod
• Control your home remotely
• Create and use scenes
• Use automations
• Set up security cameras
• Use Face Recognition
• Unlock your door with a home key
• Configure a router
• Invite others to control accessories
• Add more homes
• Get music, movies, and TV shows
• Get ringtones
• Manage purchases and settings
• Get started with Journal
• Write in your journal
• Review your past journal entries
• Change Journal settings
• Magnify nearby objects
• Change settings
• Detect people around you
• Detect doors around you
• Receive image descriptions of your surroundings
• Read aloud text and labels around you
• Set up shortcuts for Detection Mode
• Add and remove email accounts
• Set up a custom email domain
• Check your email
• Unsend email with Undo Send
• Reply to and forward emails
• Save an email draft
• Add email attachments
• Download email attachments
• Annotate email attachments
• Set email notifications
• Search for email
• Organize email in mailboxes
• Flag or block emails
• Filter emails
• Use Hide My Email
• Use Mail Privacy Protection
• Change email settings
• Delete and recover emails
• Add a Mail widget to your Home Screen
• Print emails
• Get travel directions
• Select other route options
• Find stops along your route
• View a route overview or a list of turns
• Change settings for spoken directions
• Get driving directions
• Get directions to your parked car
• Set up electric vehicle routing
• Report traffic incidents
• Get cycling directions
• Get walking directions
• Get transit directions
• Delete recent directions
• Get traffic and weather info
• Estimate travel time and ETA
• Download offline maps
• Search for places
• Find nearby attractions, restaurants, and services
• Get information about places
• Mark places
• Share places
• Rate places
• Save favorite places
• Explore new places with Guides
• Organize places in My Guides
• Delete significant locations
• Look around places
• Take Flyover tours
• Find your Maps settings
• Measure dimensions
• View and save measurements
• Measure a person’s height
• Use the level
• Set up Messages
• About iMessage
• Send and reply to messages
• Unsend and edit messages
• Keep track of messages
• Forward and share messages
• Group conversations
• Watch, listen, or play together using SharePlay
• Collaborate on projects
• Use iMessage apps
• Take and edit photos or videos
• Share photos, links, and more
• Send stickers
• Request, send, and receive payments
• Send and receive audio messages
• Animate messages
• Change notifications
• Block, filter, and report messages
• Delete messages and attachments
• Recover deleted messages
• View albums, playlists, and more
• Show song credits and lyrics
• Queue up your music
• Listen to broadcast radio
• Subscribe to Apple Music
• Play music together in the car with iPhone
• Listen to lossless music
• Listen to Dolby Atmos music
• Apple Music Sing
• Find new music
• Add music and listen offline
• Get personalized recommendations
• Listen to radio
• Search for music
• Create playlists
• See what your friends are listening to
• Use Siri to play music
• Change the way music sounds
• Get started with News
• Use News widgets
• See news stories chosen just for you
• Read stories
• Follow your favorite teams with My Sports
• Listen to Apple News Today
• Subscribe to Apple News+
• Browse and read Apple News+ stories and issues
• Download Apple News+ issues
• Listen to audio stories
• Solve crossword puzzles
• Search for news stories
• Save stories in News for later
• Subscribe to individual news channels
• Get started with Notes
• Add or remove accounts
• Create and format notes
• Draw or write
• Add photos, videos, and more
• Scan text and documents
• Work with PDFs
• Create Quick Notes
• Search notes
• Organize in folders
• Organize with tags
• Use Smart Folders
• Export or print notes
• Change Notes settings
• Make a call
• Answer or decline incoming calls
• While on a call
• Set up voicemail
• Check voicemail
• Change voicemail greeting and settings
• Select ringtones and vibrations
• Make calls using Wi-Fi
• Set up call forwarding and call waiting
• Avoid unwanted calls
• View photos and videos
• Play videos and slideshows
• Delete or hide photos and videos
• Edit photos and videos
• Trim video length and adjust slow motion
• Edit Cinematic mode videos
• Edit Live Photos
• Edit portraits
• Use photo albums
• Edit, share, and organize albums
• Filter and sort photos and videos in albums
• Make stickers from your photos
• Duplicate and copy photos and videos
• Merge duplicate photos and videos
• Search for photos
• Identify people and pets
• Browse photos by location
• Share photos and videos
• Share long videos
• View photos and videos shared with you
• Watch memories
• Personalize your memories
• Manage memories and featured photos
• Use iCloud Photos
• Create shared albums
• Add and remove people in a shared album
• Add and delete photos and videos in a shared album
• Set up or join an iCloud Shared Photo Library
• Add content to an iCloud Shared Photo Library
• Use iCloud Shared Photo Library
• Import and export photos and videos
• Print photos
• Find podcasts
• Listen to podcasts
• Follow your favorite podcasts
• Use the Podcasts widget
• Organize your podcast library
• Download, save, or share podcasts
• Subscribe to podcasts
• Listen to subscriber-only content
• Change download settings
• Make a grocery list
• Add items to a list
• Edit and manage a list
• Search and organize lists
• Work with templates
• Use Smart Lists
• Print reminders
• Use the Reminders widget
• Change Reminders settings
• Browse the web
• Search for websites
• Customize your Safari settings
• Change the layout
• Use Safari profiles
• Open and close tabs
• Organize your tabs
• View your Safari tabs from another Apple device
• Share Tab Groups
• Use Siri to listen to a webpage
• Bookmark favorite webpages
• Save pages to a Reading List
• Find links shared with you
• Annotate and save a webpage as a PDF
• Automatically fill in forms
• Get extensions
• Hide ads and distractions
• Clear your cache
• Browse the web privately
• Use passkeys in Safari
• Check stocks
• Manage multiple watchlists
• Read business news
• Add earnings reports to your calendar
• Use a Stocks widget
• Translate text, voice, and conversations
• Translate text in apps
• Translate with the camera view
• Subscribe to Apple TV+, MLS Season Pass, or an Apple TV channel
• Add your TV provider
• Get shows, movies, and more
• Watch sports
• Watch Major League Soccer with MLS Season Pass
• Control playback
• Manage your library
• Change the settings
• Make a recording
• Play it back
• Edit or delete a recording
• Keep recordings up to date
• Organize recordings
• Search for or rename a recording
• Share a recording
• Duplicate a recording
• Keep cards and passes in Wallet
• Set up Apple Pay
• Use Apple Pay for contactless payments
• Use Apple Pay in apps and on the web
• Track your orders
• Use Apple Cash
• Use Apple Card
• Use Savings
• Pay for transit
• Access your home, hotel room, and vehicle
• Add identity cards
• Use COVID-19 vaccination cards
• Check your Apple Account balance
• Use Express Mode
• Organize your Wallet
• Remove cards or passes
• Check the weather
• Check the weather in other locations
• View weather maps
• Manage weather notifications
• Use Weather widgets
• Learn the weather icons
• Find out what Siri can do
• Tell Siri about yourself
• Have Siri announce calls and notifications
• Add Siri Shortcuts
• About Siri Suggestions
• Use Siri in your car
• Change Siri settings
• Contact emergency services
• Use Emergency SOS via satellite
• Request Roadside Assistance via satellite
• Set up and view your Medical ID
• Use Check In
• Manage Crash Detection
• Reset privacy and security settings in an emergency
• Set up Family Sharing
• Add Family Sharing members
• Remove Family Sharing members
• Share subscriptions
• Share purchases
• Share locations with family and locate lost devices
• Set up Apple Cash Family and Apple Card Family
• Set up parental controls
• Set up a child’s device
• Get started with Screen Time
• Protect your vision health with Screen Distance
• Set up Screen Time
• Set communication and safety limits and block inappropriate content
• Charging cable
• Power adapters
• MagSafe chargers and battery packs
• MagSafe cases and sleeves
• Qi-certified wireless chargers
• Use AirPods
• Use EarPods
• Apple Watch
• Wirelessly stream videos and photos to Apple TV or a smart TV
• Connect to a display with a cable
• HomePod and other wireless speakers
• Pair Magic Keyboard
• Enter characters with diacritical marks
• Switch between keyboards
• Use shortcuts
• Choose an alternative keyboard layout
• Change typing assistance options
• External storage devices
• Bluetooth accessories
• Share your internet connection
• Allow phone calls on your iPad and Mac
• Use iPhone as a webcam
• Hand off tasks between devices
• Cut, copy, and paste between iPhone and other devices
• Stream video or mirror the screen of your iPhone
• Start SharePlay instantly
• Use AirDrop to send items
• Connect iPhone and your computer with a cable
• Transfer files between devices
• Transfer files with email, messages, or AirDrop
• Transfer files or sync content with the Finder or iTunes
• Automatically keep files up to date with iCloud
• Use an external storage device, a file server, or a cloud storage service
• Intro to CarPlay
• Connect to CarPlay
• Use your vehicle’s built-in controls
• Get turn-by-turn directions
• Change the map view
• Make phone calls
• View your calendar
• Send and receive text messages
• Announce incoming text messages
• Play podcasts
• Play audiobooks
• Listen to news stories
• Control your home
• Use other apps with CarPlay
• Rearrange icons on CarPlay Home
• Change settings in CarPlay
• Get started with accessibility features
• Turn on accessibility features for setup
• Change Siri accessibility settings
• Open features with Accessibility Shortcut
• Change color and brightness
• Make text easier to read
• Reduce onscreen motion
• Customize per-app visual settings
• Hear what’s on the screen or typed
• Hear audio descriptions
• Turn on and practice VoiceOver
• Change your VoiceOver settings
• Use VoiceOver gestures
• Operate iPhone when VoiceOver is on
• Control VoiceOver using the rotor
• Use the onscreen keyboard
• Write with your finger
• Use VoiceOver with an Apple external keyboard
• Use a braille display
• Type braille on the screen
• Customize gestures and keyboard shortcuts
• Use VoiceOver with a pointer device
• Use VoiceOver for images and videos
• Use VoiceOver in apps
• Use AssistiveTouch
• Adjust how iPhone responds to your touch
• Use Reachability
• Auto-answer calls
• Turn off vibration
• Change Face ID and attention settings
• Use Voice Control
• Adjust the side or Home button
• Use Apple TV Remote buttons
• Adjust pointer settings
• Adjust keyboard settings
• Adjust AirPods settings
• Turn on Apple Watch Mirroring
• Control a nearby Apple device
• Intro to Switch Control
• Set up and turn on Switch Control
• Select items, perform actions, and more
• Control several devices with one switch
• Use hearing devices
• Use Live Listen
• Use sound recognition
• Set up and use RTT and TTY
• Flash the LED for alerts
• Adjust audio settings
• Play background sounds
• Display subtitles and captions
• Show transcriptions for Intercom messages
• Get Live Captions (beta)
• Type to speak
• Record a Personal Voice
• Use Guided Access
• Use built-in privacy and security protections
• Set a passcode
• Set up Face ID
• Set up Touch ID
• Control access to information on the Lock Screen
• Keep your Apple ID secure
• Use passkeys to sign in to apps and websites
• Sign in with Apple
• Share passwords
• Automatically fill in strong passwords
• Change weak or compromised passwords
• View your passwords and related information
• Share passkeys and passwords securely with AirDrop
• Make your passkeys and passwords available on all your devices
• Automatically fill in verification codes
• Automatically fill in SMS passcodes
• Sign in with fewer CAPTCHA challenges
• Use two-factor authentication
• Use security keys
• Manage information sharing with Safety Check
• Control app tracking permissions
• Control the location information you share
• Control access to information in apps
• Control how Apple delivers advertising to you
• Control access to hardware features
• Create and manage Hide My Email addresses
• Protect your web browsing with iCloud Private Relay
• Use a private network address
• Use Advanced Data Protection
• Use Lockdown Mode
• Use Stolen Device Protection
• Receive warnings about sensitive content
• Use Contact Key Verification
• Turn iPhone on or off
• Force restart iPhone
• Back up iPhone
• Return iPhone settings to their defaults
• Restore all content from a backup
• Restore purchased and deleted items
• Sell, give away, or trade in your iPhone
• Erase iPhone
• Install or remove configuration profiles
• Important safety information
• Important handling information
• Find more resources for software and service
• FCC compliance statement
• ISED Canada compliance statement
• Ultra Wideband information
• Class 1 Laser information
• Apple and the environment
• Disposal and recycling information
• Unauthorized modification of iOS

Zoom in on the iPhone screen

In many apps, you can zoom in or out on specific items. For example, you can double-tap or pinch to look closer in Photos or expand webpage columns in Safari. You can also use the Zoom feature to magnify the screen no matter what you’re doing. You can magnify the entire screen (Full Screen Zoom) or magnify only part of the screen with a resizable lens (Window Zoom). And, you can use Zoom together with VoiceOver.

Set up Zoom

Adjust any of the following:

Follow Focus: Track your selections, the text insertion point, and your typing.

Smart Typing: Switch to Window Zoom when a keyboard appears.

Keyboard Shortcuts: Control Zoom using shortcuts on an external keyboard.

Zoom Controller: Turn the controller on, set controller actions, and adjust the color and opacity.

Zoom Region: Choose Full Screen Zoom or Window Zoom.

Zoom Filter: Choose None, Inverted, Grayscale, Grayscale Inverted, or Low Light.

Maximum Zoom Level: Drag the slider to adjust the level.

If you use iPhone with a pointer device, you can also set the following below Pointer Control:

Zoom Pan: Choose Continuous, Centered, or Edges to set how the screen image moves with the pointer.

Adjust Size with Zoom: Allow the pointer to scale with zoom.

To add Zoom to Accessibility Shortcut, go to Settings > Accessibility > Accessibility Shortcut, then tap Zoom.

Double-tap the screen with three fingers or use Accessibility Shortcut to turn on Zoom.

To see more of the screen, do any of the following:

Adjust the magnification: Double-tap the screen with three fingers (without lifting your fingers after the second tap), then drag up or down. Or triple-tap with three fingers, then drag the Zoom Level slider.

Move the Zoom lens: (Window Zoom) Drag the handle at the bottom of the Zoom lens.

Pan to another area: (Full Screen Zoom) Drag the screen with three fingers.

To adjust the settings with the Zoom menu, triple-tap with three fingers, then adjust any of the following:

Choose Region: Choose Full Screen Zoom or Window Zoom.

Resize Lens: (Window Zoom) Tap Resize Lens, then drag any of the round handles that appear.

Choose Filter: Choose Inverted, Grayscale, Grayscale Inverted, or Low Light.

Show Controller: Show the Zoom Controller.

To use the Zoom Controller, do any of the following:

Show the Zoom menu: Tap the controller.

Zoom in or out: Double-tap the controller.

Pan: When zoomed in, drag the controller.

While using Zoom with Magic Keyboard, the Zoom region follows the insertion point, keeping it in the center of the screen. See Pair Magic Keyboard with iPhone .

To turn off Zoom, double-tap the screen with three fingers or use Accessibility Shortcut .

How to unzoom iPhone and entirely turn this feature off

Zoom is an iOS accessibility feature , which, as the name suggests, zooms or enlarges the contents on the screen, making it easier for people with weak eyesight. If you accidentally enabled this option, navigating the iPhone screen may get challenging and tapping the buttons confusing.

How to unzoom iPhone and iPad screen

Just for the record, you cannot zoom out the iPhone screen by simply double-tapping or pinching in with two fingers as you do with photos, web pages, etc.

To unzoom your iPhone or iPad screen, quickly double-tap anywhere on the screen with three fingers , and then with one finger, tap Zoom Out .

Immediately your iPhone screen will go back to normal. After this, you may follow the steps described below to turn off this feature. This will ensure you do not accidentally enable it ever again.

You can also use Accessibility Shortcut to turn off zoom if you had enabled the shortcut in the first place. It is found under Settings > Accessibility > Accessibility Shortcut .

On iPhone with Face ID, triple-press the right Side button . On other iPhones, triple-press the Home button .

If only Zoom was added as the Accessibility Shortcut, triple-pressing will turn it off (and turn it on when triple-pressed again).

However, if more than one shortcut was added to Accessibility Shortcut, triple-pressing the Side or Home button will ask you to choose one of the shortcuts. Drag the zoomed screen around with three fingers. Finally, tap Zoom to disable it.

How to turn off zoom on iPhone

Once the iPhone screen returns to normal, follow these steps to turn off the system zoom. Turning off would ensure that you do not accidentally zoom the display again by double-tapping with three fingers or triple-pressing the Side/Home button. Plus, even if after following the above steps you could not unzoom, you may use the steps below to turn it off. Just remember to drag the screen with three fingers . You can tap like you usually do with one finger.

• Open iPhone Settings and tap Accessibility .
• Turn off the switch for Zoom .

What to do if you cannot turn off screen zoom on your iPhone?

After you follow the above steps, you should be able to successfully unzoom iPhone screen and even turn off this feature. However, if in rare cases, double-tapping with three fingers did not work for you or you could not navigate around the screen to turn off zoom, use this method.

• Connect your iPhone to Mac or PC using a Lightning cable. If you are on a Mac running macOS Catalina or later, open Finder . If you are on macOS Mojave or earlier or a Windows PC, open iTunes .
• Click on your iPhone name (in the Finder sidebar) or icon (in iTunes).
• From the General tab, click Configure Accessibility .
• Uncheck the Zoom checkbox and click Ok . Immediately, the iPhone screen will return to normal.

This is how you can get out of the zoomed iPhone or iPad screen. I hope this quick guide was helpful. iOS has multiple such accessibility features, and some of them, like Back Tap and Magnifier , are useful for all. Give them a try. Plus, if interested, you may explore more accessibility features and news here.

iOS 17: How to Turn Off Zoom on iPhone – Step by Step Guide

To turn off the zoom feature on an iPhone running iOS 17, navigate to Settings, select Accessibility, tap on Zoom, and switch the toggle to the off position. This quick action will disable the zoom feature and return your display to its standard view.

After completing this action, your iPhone screen will no longer magnify when you double-tap with three fingers. The zoom feature can be a great tool for those who need it, but it can be a nuisance if activated accidentally. Turning it off ensures a consistent and predictable display experience.

You can also check out this video about how to turn off zoom on iPhone for more on this topic.

Introduction

Ever found yourself stuck on a zoomed-in screen on your iPhone, frantically pinching the screen with no response? If yes, then you’ve probably had a run-in with the iPhone’s zoom feature – a tool designed to aid those with visual impairments by magnifying the screen for easier viewing. But for users who do not require this feature, or find it activating unintentionally, it can be quite a hassle. The zoom feature has been a staple in iPhones for years, and with the rollout of iOS 17, understanding how to manage it remains just as relevant.

This feature, while valuable for accessibility purposes, can sometimes be activated accidentally, leading to confusion and frustration. Whether you’re someone who has never needed the zoom functionality or you’re simply looking to gain control over your iPhone’s display settings, knowing how to turn off the zoom feature on your iPhone is essential. This article is geared towards iPhone users of all ages who want to tailor their device’s settings to their liking and is particularly useful for those who might not be tech-savvy.

Step by Step Tutorial on Disabling Zoom on iPhone with iOS 17

Before diving into the steps, it’s important to understand what we’re aiming to accomplish. This tutorial will guide you through the process of turning off the zoom feature on your iPhone running iOS 17, ensuring that your screen stays un-magnified and avoiding any accidental zoom-ins.

Step 1: Open the Settings App

To begin, locate and open the Settings app on your iPhone.

The Settings app is your command center for all things related to your iPhone’s system preferences. It’s represented by a gear icon and is typically found on your home screen. If you can’t find it immediately, you can also swipe down on the home screen and use the search bar to locate it.

Step 2: Select Accessibility

Scroll down and select the Accessibility option.

Accessibility features are designed to make your iPhone easier to use for those with different abilities. In this section, you’ll find options for vision, physical and motor, hearing, and more, making your iPhone more inclusive.

Step 3: Tap on Zoom

Within the Accessibility settings, tap on the Zoom option.

The Zoom section is where you can adjust the magnification settings for your iPhone’s display. Here, you can also explore other zoom-related options like the zoom filter, controller, and the ability to assign zoom to the accessibility shortcut.

Step 4: Toggle Zoom Off

Switch the toggle next to Zoom to the off position.

This step is the final action that will disable the zoom feature on your iPhone. The toggle switch will turn from green to grey, indicating that the zoom feature is no longer active.

Additional Information

When it comes to customizing your iPhone, getting to grips with the settings is key. Not only does iOS 17 allow you to turn off the zoom feature, but it also provides a whole host of other customizable options to enhance your user experience. Remember, if you ever need to re-enable the zoom, just follow the steps in reverse.

Also, consider exploring other accessibility features that iOS 17 offers. Apple prides itself on creating inclusive technology, and there might be other tools that could improve your interaction with your iPhone. VoiceOver, for instance, is a feature that reads out the screen for those who have trouble seeing it.

And one more thing, always make sure your iPhone is running the latest version of iOS to ensure you have the most up-to-date features and security updates. Now that you know how to turn off zoom on iPhone with iOS 17, you can enjoy a more streamlined and hassle-free digital experience.

• Open the Settings app.
• Select Accessibility.
• Tap on Zoom.
• Toggle Zoom off.

Frequently Asked Questions

What is the zoom feature on iphone.

The zoom feature is an accessibility tool that magnifies the iPhone screen, making it easier to see for those with visual impairments.

Will turning off zoom affect other accessibility settings?

No, turning off zoom only affects the magnification of the screen. Other accessibility settings will remain unchanged.

Can I turn zoom back on after disabling it?

Yes, you can re-enable the zoom feature at any time by following the same steps and toggling the switch back on.

What other accessibility features should I explore in iOS 17?

iOS 17 offers a variety of accessibility features such as VoiceOver, Magnifier, and Sound Recognition, among others.

How do I update my iPhone to iOS 17?

You can update your iPhone to iOS 17 by going to Settings, tapping General, and then selecting Software Update.

In a world where technology is constantly evolving, staying up-to-date with the latest features and settings on your iPhone is crucial. Turning off the zoom feature in iOS 17 is just one of the many ways you can personalize your device to fit your needs. Whether you’re looking to prevent accidental activations or you simply prefer a non-magnified screen, following the steps outlined in this article will help you achieve that.

Remember that while turning off zoom can enhance your user experience, it’s also important to be mindful of the needs of others who may rely on this feature. Technology is at its best when it is accessible and usable by everyone.

If you’re keen on learning more about the myriad of options available on your iPhone, delve into the sea of resources available online or consider enrolling in a tech workshop. Keep exploring, keep learning, and make your iPhone work for you.

Matthew Burleigh has been writing tech tutorials since 2008. His writing has appeared on dozens of different websites and been read over 50 million times.

After receiving his Bachelor’s and Master’s degrees in Computer Science he spent several years working in IT management for small businesses. However, he now works full time writing content online and creating websites.

His main writing topics include iPhones, Microsoft Office, Google Apps, Android, and Photoshop, but he has also written about many other tech topics as well.

Read his full bio here.

Share this:

Join our free newsletter.

Featured guides and deals

You may opt out at any time. Read our Privacy Policy

Related posts:

• How to Unzoom Apple Watch
• 15 iPhone Settings You Might Want to Change
• How to Change the Maximum Zoom Level iPhone Setting
• How to Rotate Screen on iPhone 7
• (5 Options) How to Turn Off AirPod Notifications on an iPhone
• How to Shut Off iPhone 6 Zoom
• How to Keep iPhone Screen On (2023 Guide)
• How to Make All Columns the Same Width in Excel 2013
• How to Zoom Out on Safari iPhone Web Browsers
• How to Enable or Disable Portrait Orientation Lock Button on iPhone
• How to Turn Off Flash Notification on iPhone (2024 Guide)
• iOS 17 – How to Increase Contrast on iPhone
• How to Invert Colors on iPhone 13
• How to Change Page Zoom in Safari on iPhone 14
• How to Turn Off Tap to Wake on iPhone 14: A Step-by-Step Guide
• How to Change the Zoom Level in Google Docs
• How to Zoom the iPhone 5 Camera
• Why Is There a Moon Next to My Text Message on an iPhone? (or a Bell in Newer Versions of iOS)
• How to Zoom in on Microsoft Paint
• How to Zoom in Word 2010

November 2, 2018

Jeffery to in tech | november 2, 2018, no input zoom in safari on iphone, the pixel perfect way.

There is a question on Stack Overflow that I check from time to time, “ Disable Auto Zoom in Input ‘Text’ tag – Safari on iPhone “.

“Someday,” I would say to myself, “I’ll post my solution and write a blog post as well.”

That day has arrived.

What is the problem, exactly?

Sometimes in Safari (or any other browser built on UIWebView or WKWebView) on iPhone, if the user focuses a text input field, the browser will zoom in a little.

You can try this yourself in Example 1 (on iPhone, of course). (Full size screenshots: 1 , 2 )

(Screenshots in this post are from iPhone 7 Plus running iOS 11.4.1, resized from their original 3x size down to 1x and saved as JPEG. Full size links are to the original PNG files.)

The cause of this issue, as the top-voted Stack Overflow answer notes, is the font size of the input field text. If the font size is less than 16px, then Safari will zoom in when the field is focused. It does not matter if other units like em or rem are used, as long as the computed font size is less than 16px.

One might presume that Safari does this to make the text more readable, but this only occurs on iPhone and not iPad, where the same readability concerns may also apply.

What are the solutions so far?

Current Stack Overflow answers boil down to two approaches:

• Set the font size to 16px.
• Disable page zooming, by adding maximum-scale=1.0 and/or user-scalable=no to the <meta name="viewport"> tag.

Neither solution is free of trade-offs:

• Setting the font size to 16px sacrifices visual design. Increasing the text size for one element without adjusting other elements may disrupt the visual hierarchy of the page.
• Disabling page zooming hurts usability. There are many reasons why users want / need the ability to zoom in.

What do you suggest?

This is a method that trades CSS complexity for preserving visual design and maintaining usability. In essence:

• Style the input field so that it is larger than its intended size, allowing the logical font size to be set to 16px.
• Use the scale() CSS transform and negative margins to shrink the input field down to the correct size.

A concrete example

Suppose, as in Example 1 , the input field is originally styled as follows:

(Pixel lengths are used here for simplicity; relative units like em or rem are preferred for real world use.)

First, enlarge the input field by increasing all dimensions by 16 ÷ 12 = 133.33%:

Notice that the font size is now 16px, which will not trigger any zoom on focus.

Next, reduce the input field using the scale() CSS transform by 12 ÷ 16 = 75%:

You can see the result of this styling in Example 2 . (Full size screenshots: 1 , 2 )

Note that at this point, there is extra white space to the right and below the input field. This is because scale() only affects the field’s visual appearance; the field’s larger logical size remains unchanged.

Set negative margins to remove this extra space:

Example 3 contains this final styling: (Full size screenshots: 1 , 2 )

There will be notes

A few points to keep in mind:

• A 16px font scaled down to 12px will appear very close, but not identical, to the same font set at 12px. In particular, fonts usually have hinting that increases legibility at smaller sizes. Be sure to test the input field’s readability after applying this method.
• Other input field styles may also be affected, due to rounding in the enlarge-then-shrink process. For instance, a 1px border may end up appearing slightly thinner or lighter. (If you examine the full size screenshots above, you will note that the input field has become about 0.33px shorter in height.) This would not normally be noticeable to users but be sure to test the result.
• Due to the previous two points, I would suggest limiting this approach to iOS devices only. (Yes, with user agent detection if necessary.)
• Did I mention, be sure to test the result. 😜

Also, while researching for this post I came across this pen by Jakob Eriksen that exactly illustrates this technique. What can I say, great minds think alike . 😂

With a little CSS trickery, it is possible to implement a given design and avoid the input zoom issue in Safari at the same time. I hope to see this method used on more sites in the future.

P.S. If you liked this solution, please upvote my answer on Stack Overflow and help spread the word. Thanks!

Cancel Reply

Write a comment.

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

12 Comments

This solution was a life saver, and a very clever one. I will be bookmarking this. Thank you, Jeffery!

Use user-scalable=0 instead of user-scalable=no

What would be the difference?

But why we didn’t count both way? If we have input with font-size 14px We can set font-size to 16px Calc scale strength as 14/16 -> transform: scale(0.875); And calc scale for smaller styles already

For example for height: 25px We can count 16/14 -> height: calc(25px * 1.142857);

In the example, by enlarging line height and padding, the height of the input field is also increased. You could set an explicit (scaled up) height if you prefer.

Does this address your question?

wowww! its working pretty good, thank you so much!

2020 on the calendar. Any updates on this?

What kind of updates are you looking for?

Ran into this issue today, has anyone tried the ‘contenteditable’ approach?

Now this solution doesn’t work for safari on iOS. Are there any updates?

I have just retested the final example on iOS 13.5 and saw no issues. How is it not working for you?

As a 75% iOS Safari user, I need all the web dev reading this, lol, this zooming is so infuriating 😅

Want to highlight a helpful answer? Upvote!

Did someone help you, or did an answer or User Tip resolve your issue? Upvote by selecting the upvote arrow. Your feedback helps others!  Learn more about when to upvote >

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

Disabling Safari zoom

I want to disable the overly-sensative zoom in Safari using MM2, but I find it useful in other apps, can Safari be individually reset without disabling the double tap feature for everything else?

iMac, OS X El Capitan (10.11.6)

Posted on Aug 14, 2016 1:14 PM

Posted on Aug 14, 2016 1:17 PM

Open System Preferences > Accessibility then select Zoom on th left.

There might be a keyboard shortcut there that may help you for Safari.

Loading page content

Page content loaded

Aug 14, 2016 1:17 PM in response to FHBrian

Aug 16, 2016 12:27 AM in response to Carolyn Samit

Thanks, I reset the Zoom control for keystrokes under Accessibility and just turned the "smart" zoom off. There are other glitches and as I come across them I turn that MM2 feature off e.g ., the "swipe between pages/apps" works but if you have an open reply box like this and you swipe, the reply content is lost. Soon I'll just have the scroll and right click, making the MM2 a stylish but very over-priced "dumb" mouse.

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

How to disable Safari on iPhone? 3 Ways explained!

Safari is the browser that comes with your iPhone — and all Apple devices, for that matter. But what if Safari isn’t quite your cup of tea? The good news is Apple not only lets you download a different browser for your iPhone but also makes it possible for you to set a different browser as your default. Are you one of those who’ve switched and are now wondering how to disable Safari from your iPhone?

It’s worth noting that Safari is deeply integrated into the Apple ecosystem, making its complete removal a bit tricky. But don’t worry; there are workarounds to remove Safari from your iPhone. Let’s dive into what you need to know.

Can you delete Safari from your iPhone?

3 ways to disable safari from iphone, why you might want to delete safari from your iphone.

Deleting Safari from your iPhone is almost impossible unless you’re a tech wizard. It’s deeply embedded and not really meant to be taken out. This is mainly because of how closely Safari is integrated with Apple’s operating system. Plus, Apple uses a security feature called System Integrity Protection (SIP) to keep the system’s core parts safe — including Safari.

If you’re not a tech expert, tweaking these settings could lead to some pretty serious issues, possibly even a non-functioning iPhone.

While you can’t uninstall Safari, you’re not entirely out of options. You can’t delete it, but you can disable and wipe out its data. It’s like putting Safari into a dormant state — it’s still there, but it won’t get in your way.

You can do several things to “remove” Safari’s existence from your iPhone.

1. Disable Safari from your iPhone using Screen Time

You can disable Safari, rendering it undiscoverable in the App Library and Home Screen. To do this:

• Go to  Settings   → Screen Time.

Screen Time has many other uses besides hiding apps on your iPhone. You can also use it to  set communication limits for your child  and limit their digital exposure.

2. Remove Safari from your iPhone Home Screen

While you can’t permanently remove Safari from your iPhone, you can remove it from your Home screen and leave it buried in the App Library.

3. Change your iPhone’s default browser

Instead of removing Safari, you may also consider switching your default browser. For instance, you can  change it from Safari to Chrome or any other downloaded browser of your choice.

That’s it; this simple step ensures that when you open links or browse the web, your preferred browser takes the lead, pushing Safari into the background.

There are plenty of reasons why a person would like to delete Safari from their iPhones and switch to a different browser:

• An organization specifies the use of a different browser.
• Other browsers offer better privacy and security.
• Apple has been caught collecting people’s browsing histories, even while using private browsing.
• While Safari being closed-source means it’s more secure and less likely to be compromised by cybercriminals, it also prevents people from checking for vulnerabilities.
• Google pays Apple to feature the search engine giant as Apple’s preferred search engine on all Apple devices. Since Google is known to collect user data for advertising purposes, people might prefer a different browser that uses a different search engine.

If you’re looking for a different browser, here are the  best Safari alternatives for your iPhone .

Wrapping up…

While Apple doesn’t make it easy for you to totally get rid of Safari from your iPhone, there are several workarounds to keep it hidden and inactive. Curious to know – what’s your reason for wanting to ditch Safari? Do you have another browser that better fits your needs? Drop a comment and let us know your browser of choice and why you prefer it over Safari!

• How to turn off or block Safari Private Browsing on iPhone and iPad
• Safari vs. Chrome: Which browser is better for iPhone and Mac?
• How to change default search engine for Private Browsing in Safari on iPhone

🗣️ Our site is supported by our readers like you. When you purchase through our links, we earn a small commission. Read Disclaimer .

Leave a Reply Cancel reply

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

Save my name, email, and website in this browser for the next time I comment.