DEV Community

DEV Community

jasperreddin

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)

pic

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

bennadel profile image

  • 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!

djfiorex profile image

  • 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

jasperreddin profile image

  • 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?

agustinlavalla profile image

  • 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

williamdk profile image

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

Asaba William - Apr 14

muneebkh2 profile image

Laravel - Unlock the Power of Laravel Gates for Simplified Authorization

Muneeb Ur Rehman - Apr 14

mtayade91 profile image

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

Mangesh Tayade - Apr 2

jitendrachoudhary profile image

Lessons I learned as a Self Taught Developer

Jitendra Choudhary - Apr 14

DEV Community

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

you can use css to remove the double-tap zoom feature on iOs

  • Home New Posts Forum List Trending New Threads New Media Spy
  • WikiPost Latest summaries Watched WikiPosts
  • Support FAQ and Rules Contact Us

How to deactivate the safari double-click zoom in?

  • Thread starter jnozsc
  • Start date Feb 26, 2011
  • Sort by reaction score
  • Older macOS Versions
  • Mac OS X Lion (10.7)

macrumors newbie

  • Feb 26, 2011

macrumors 6502a

  • Feb 27, 2011

i'm wondering too i think its useless on a desktop and it gets triggered all the time inadvertently here.  

johannnn

macrumors 68020

Don't see it here on my 11 MBA. Is this some System Preference setting?  

ovrlrd

macrumors 65816

poobear said: Don't see it here on my 11 MBA. Is this some System Preference setting? Click to expand...
ovrlrd said: Are you sure you are doing it right? It is double tap for zoom, not double click. You don't actually press down the trackpad. Also you have to use two fingers while you tap. So move your cursor over an area, then double tap using two fingers. It should zoom in like it does on iOS Safari. The same gesture zooms out. To be honest I haven't had a single time where I triggered it accidentally. I have been using it a little bit on my 11" MBA for fun but I don't see myself using it that much. Click to expand...

iPhone1

Doesn't work for me. Double tap to zoom on a Mac seems silly to me.  

iOS 13: Double Tap to Zoom in Safari No Longer Works

Andrew Orr

Double Tap Zoom

Instead of double tapping you’ll have to pinch and un-pinch to zoom in and out. While it’s not a huge change, it was a feature that made using your iPhone with one hand easier. So far it appears to be only removed in Safari. Double tap to zoom works in Maps and Photos.

If you’ve noticed other small features that have been removed, share them in the comments below and we’ll write about it.

Further Reading:

[ Instagram Gets Dark Mode in iOS 13 ]

[ Apple Has to Pay Taxes in Every Country it Operates in ]

Leave a Reply Cancel reply

You must be logged in to post a comment.

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

safari double click zoom disable

Tom's Guide Forum

  • Forums New posts Trending Search forums
  • What's new New posts Latest activity
  • Members Current visitors Billboard Trophies

iPhone 16: All the rumors so far!

Turn off the double tap zoom

  • Thread starter Albert_27
  • Start date Jul 29, 2016
  • Cell Phones
  • Android Smartphones

Commendable

  • Jul 29, 2016

how do i turn off the double tap zoom  

webworkings

webworkings

  • Jul 30, 2016

How to turn off the double tap zoom (Magnification Gestures) The double tap zoom, or Magnification Gestures as it is actually called, enables you to temporarily magnify what’s on your phones screen. To enable, or disable, magnification gestures you need to... 1. Go to "Settings" and then "Accessibility". 2. Next tap "Magnification Gestures". 3. Set it to either on or off, depending on which you are trying to do. Note: When "Magnification Gestures" are turned on, you can magnify, pan, and zoom in many ways. 1. You can zoom in or out by "triple-tapping" the screen. Then, while zoomed in, you can: a. "Drag" two or more fingers to pan across the screen. b. "Pinch" two or more fingers together, or spread them apart, to...

How to turn off the double tap zoom (Magnification Gestures) The double tap zoom, or Magnification Gestures as it is actually called, enables you to temporarily magnify what’s on your phones screen. To enable, or disable, magnification gestures you need to... 1. Go to "Settings" and then "Accessibility". 2. Next tap "Magnification Gestures". 3. Set it to either on or off, depending on which you are trying to do. Note: When "Magnification Gestures" are turned on, you can magnify, pan, and zoom in many ways. 1. You can zoom in or out by "triple-tapping" the screen. Then, while zoomed in, you can: a. "Drag" two or more fingers to pan across the screen. b. "Pinch" two or more fingers together, or spread them apart, to adjust the zoom level. Another Note: If you enter, or exit, an app when zoomed in, you should be automatically zoomed out. To re-zoom in, all you need to do is triple-tap the screen again. To temporarily magnify what's under your finger, triple-tapthe screen and then hold it on the last tap. In this magnified state, you can: 1. "Drag" your finger to explore different parts of the screen. 2. "Lift" your finger to return to the previous state. Note: Triple-tap for magnification works everywhere except the keyboard and navigation bar.  

Similar threads

admin

  • Nov 7, 2023
  • Article Commentary
  • Oct 4, 2023
  • Oct 25, 2023
  • Nov 8, 2023
  • Sep 13, 2023

RobHs

TRENDING THREADS

  • Started by jafarpb
  • Yesterday at 12:44 PM
  • Started by Aurelea
  • Yesterday at 10:10 AM
  • Started by Smajdalfko
  • Today at 4:43 AM
  • Started by terty
  • Sunday at 10:28 PM
  • Started by l1orky
  • Yesterday at 1:00 AM
  • Started by autozonejawana
  • Sunday at 10:22 PM

AveryBr

  • Started by AveryBr
  • Yesterday at 11:50 AM

Moderators online

COLGeek

Share this page

safari double click zoom disable

  • Advertising
  • Cookies Policies
  • Term & Conditions

safari double click zoom disable

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.

Safari 15 - double click on title bar to maximise the screen

Recently I have updated to Safari 15 on macOS Big Sur(Apple M1 chip).

I got into troubles when I tried to maximise(zoom) safari window by double click.

It wasn't working for me.

I found some answer:

Hold down command and mouse double click on title bar it will maximise the screen

and it is working.

But after that trick I figured out that mouse double click on title bar already started working.

Is that a bugs or just a feature?

Posted on Sep 23, 2021 4:12 AM

Similar questions

  • Why doesn't Safari zoom to full width like other apps? Why is it that Safari will only zoom vertically but not horizontally? This drives me crazy! I don't like using the full-screen zoom where the menu bar disappears, like when you click the green finder window button. I want it to zoom to the full-screen size but leave the menu bar visible. Pretty much every other app, including other Apple apps, will do this when you option-click the green button or click Zoom in the Window menu, EXCEPT Safari. Is there a reason for this or is it simply an oversight? Is there any way to change this? I hate that I have to pull the window to the width of the screen. 1219 3
  • Impossible to use apps full-screen on macOS Monterey with Safari opened I almost always I have Safari up and running on my Mac. In the last 2 weeks though, there is an issue with it. When I open full screen any app, after 4-5 seconds, the screen is rolling back to Safari. I can't figure it out why, and is really awkward and annoying. The only way to solve it is closing Safari. Does anyone have the same? Thanks in advance. 439 4
  • Green button zoom to "Full Screen" not filling the screen. I only recently discovered that "alt + click green button" zooms window to fill screen without switching over to full screen mode. I just wiped and reset my Mac, and now the zoom feature will make the window taller but won't fill the window. Is there some setting to change how the zoom window feature works to fill the screen? I really like going "Full screen" without going to "Full Screen Mode" because I don't want it to make it's own space which messes up some shortcuts (ctrl + 1 to get to space 1 etc.) I'm an m1 MacBook Air, MacOS 12.0.1 Monterey, and I've noticed this in most applications, but let's say Safari and finder specifically. 3826 4

Loading page content

Page content loaded

There are no replies.

IMAGES

  1. how to disable screen double click on zoom

    safari double click zoom disable

  2. How to Stop Safari From Auto-Zooming on Input Fields

    safari double click zoom disable

  3. How to Disable the Smart Zoom Feature in OS X Mavericks Safari

    safari double click zoom disable

  4. iOS 13: Double Tap to Zoom in Safari No Longer Works

    safari double click zoom disable

  5. How to deactivate the safari double-click zoom in?

    safari double click zoom disable

  6. How to Disable Pinch to Zoom Gesture in Safari & Mac OS X

    safari double click zoom disable

VIDEO

  1. How to Disable Zoom Feature on Wix (2022)

  2. The RICH zoom pass this place! Walk to work

  3. Stay With The Intercessors

  4. How to Change Safari Zoom on iPhone or iPad (iOS)

  5. Is your website just a waiting room for clients?

  6. How to Enable or Disable Favorites in Safari Start Page

COMMENTS

  1. Disable double-tap "zoom" option in browser on touch devices

    Disable double tap zoom on mobile (2023 IOS Safari solution): I found that using the meta tag method was not a viable solution for mobile safari browsers. Here is the solution that worked for me. working solution:.selector { touch-action: manipulation; }

  2. How to turn off double tap zoom in iOS 15 safari

    If you are doing this with a 3 finger double tap, that's not specific to Safari.. that is activating an accessibility feature called Zoom and you can do that in any app on your iPhone, also from your Home Screen. If that's what you're seeing, you'd disabled that by going into Settings > Accessibility > Zoom and turning off the switch at the top.

  3. Disable double tap zoom on Safari iOS 13

    I unsuccessfully tried Helmet, and finally the way I got it to disable all unwanted move/zoom events was to use CSS similar to above: body {. touch-action: none; } Stating 'none' disabled double click zoom, whereas 'manipulation' still opened the door for double click zoom (although it did disable two finger zoom).

  4. How do you disable double-tap zooming on Safari?

    This has been asked before, but no clear answer was given. When on mobile safari, you can double tap in some instances and it will zoom. I have every zoom feature fully disabled, but it's a bother. The best example I have is if you go to the Google Solitaire website (Not the mini-game built into the search engine) and if you double tap on the ...

  5. Turn OFF double click = zoom

    I believe if you go to System Preferences>Mouse>Pint & Click and deselect Smart Zoom that stops the screen zooming when you tap the mouse. You will also need to do the same in System Preferences>Trackpad>Scroll & Zoom to stop it happening when double tapping the trackpad. Hope that helps. ak1956. Level 2.

  6. Disabling Viewport Zoom on iOS 14 Web Browsers

    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. body { touch-action: pan-y; } What the touch-action property does is it disables all touch events going to the selected element (s) except for the value specified.

  7. you can use css to remove the double-tap zoom feature on iOs

    It's very annoying. Anyway, here's a simple css solution that stops the double-tap zoom. button {. touch-action: manipulation; } touch-action is a css property that defines how an element can be used by a touch screen. Of course, you shouldn't stop everything being zoomable, just specific elements that are causing trouble.

  8. How do you disable double-tap to zoom in safari? : r/iphone

    I can already zoom by pinch-zooming. The double-tap to zoom is so annoying when you're pressing buttons on a website quickly. 9. 1. Sort by: Add a Comment. doogm. • 6 yr. ago. Well, one thing you could try is Settings / General / Accommodations / Ignore repeat (turn on) and set a relatively longer time.

  9. How to deactivate the safari double-click zoom in?

    Lion brings the iOS double-click zoom-in back to Mac However, the Macbook screen is big enough, so I think it isn't necessary and useful :( And I cannot find a setting to deactivate it. I use double-click in safari to select a single word, now it can select and zoom-in in the same time...

  10. Is there ANY way to turn off double-tap =…

    I found the answer! The double-tap zoom applies in apps besides Safari (TextEdit, for one) and the place to turn it off is in System Preferences, not Safari: System Preferences » Trackpad » Scroll & Zoom tab » uncheck Smart zoom. danialfromrichland. Level 1.

  11. iOS 13: Double Tap to Zoom in Safari No Longer Works

    Double Tap Zoom. Instead of double tapping you'll have to pinch and un-pinch to zoom in and out. While it's not a huge change, it was a feature that made using your iPhone with one hand easier ...

  12. Turn off the double tap zoom

    Go to "Settings" and then "Accessibility". 2. Next tap "Magnification Gestures". 3. Set it to either on or off, depending on which you are trying to do. Note: When "Magnification Gestures" are turned on, you can magnify, pan, and zoom in many ways. 1. You can zoom in or out by "triple-tapping" the screen.

  13. Ipad how do I double click in safari?

    1. A double-click can be performed by tapping twice in quick succession. If the page zooms instead, the website has not correctly programmed the double-click functionality. A right-click can be performed by tapping with two fingers. Share.

  14. How to disable zoom in on Safari when tap…

    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.

  15. IOS 15 How To Disable Double Tap Zoom in Safari : r/ios

    Hello, looks like your post is about Support. Please remember we only allow Software Issues here at r/iOS.Hardware issues should be posted to r/applehelp or r/iphonehelp.. Please also check out the Tech Support FAQ If your issue is found there, please delete your post.. If a user replies to you with an answer that works, please reply/comment -solved. This will change the flair of your post and ...

  16. Double tap to Zoom : r/edge

    But I have only found the options under Accessibility in Edge. They do not include any Zoom to paragraph. The closest thing that worked was using the immersive reader, which can be accessed by either pressing F9 or clicking on the book icon in the URL box. (or open the three-dot menu) And you can increase the size of the paragraph in the ...

  17. Safari iPad 1: how to disable zoom/centering on double-tap, but keep

    JQuery approach to disable Double Tap Zoom in MVC4 To Disable the double tap (double mouse down) functionality on iOS 1+ you need to catch the touchStart Event and create an override to prevent the zoom. ... Safari only fires a click to help simulate a click... But when there's a double tab, Safair doesn't through a "click" element. Your event ...

  18. How can I disable Pen Tablet Double Click?

    This tutorial will show you how to use ViVeTool to enable or disable hidden features in Windows 10 and Windows 11. ViVeTool is an open source tool that can... This tutorial will show you how to always, when the taskbar is full, or never combine taskbar buttons and hide labels for your account, specific users, or...

  19. Disabling double tap zoom in Chrome or Sa…

    Enabling the "Zoom Controller" as explained above may be a good solution for you. You can also send feedback directly to Apple if you have other suggestions to make this feature more useful: Product Feedback - Apple. Take care. Disabling double tap zoom in Chrome or Safari, not iPad itself. .

  20. IOS HTML disable double tap to zoom

    to disable the zoom which appeared to work using the Firefox app for IOS. However, when another user tested it with Safari, clicking on the button too fast resulted in zooming in on the page, distracting the user and making it impossible to increase the value quickly. ... Disable double tap zoom on Safari iOS 13 + 1.

  21. Safari 15

    Recently I have updated to Safari 15 on macOS Big Sur (Apple M1 chip). I got into troubles when I tried to maximise (zoom) safari window by double click. It wasn't working for me. I found some answer: Hold down command and mouse double click on title bar it will maximise the screen. and it is working.