Disable Pinch Zoom on Mobile Web

Asked 27/7, 2012 at 14:1 Answered 19/7, 2023 at 12:38

Solved html css mobile-website viewport

101

I want to disable Pinch and Zoom on Mobile devices.

What configuration should I add to the viewport ?

Link : http://play.mink7.com/n/dawn/

Impulsive answered 27/7, 2012 at 14:1 Comment(19)

initial-scale=1, maximum-scale=1 – Checklist 27/7, 2012 at 14:4

Because you've disabled pinch zoom, making it mobile unfriendly – Glomerule 13/6, 2013 at 21:35

I hope you're not creating a website for a UK based organisation - if you are, disabling pinch-to-zoom (effectively an accessibility feature) would put you in breach of several laws for actively discriminating against people with visual impairments ... There is never a good reason to disable this functionality ... Ever! – Kathline 9/7, 2013 at 20:18

Not always a bad idea. If you are making an app like webpage thats what i would do. You cant always use app store so this is next best thing. – Ashtray 10/7, 2013 at 22:28

Please stop doing this. The visually impaired can't view websites without zooming in on them and this makes our lives much harder. – Ketty 21/11, 2013 at 2:13

I fail to see how disabling pinchzoom on an "app-like" webpage adds any value. All you're going to do is anger your users. – Glomerule 25/12, 2013 at 18:48

Disabling zoom on mobile is always a bad idea, except when you want/have to use elements with fixed position. Only in this last case, you need to disable pinch to zoom or your site/app will appear screwed up, buggy and unusable as soon as the user zoom in. – Illyricum 23/10, 2014 at 17:47

Do visually impaired people have difficulty using apps that don't have pinch/zoom, or is there some other mechanism that helps with using such apps? – Instructor 30/10, 2014 at 22:15

@JamesFoster app font can be set a system level under "Accessibility" or "Display", or per app basis (the most serious ones). – Torbart 25/11, 2014 at 15:8

Could you imagine making a "Google Maps" style app, and the first time you pinch to zoom in, you can no longer see the TEXT ENTRY BOX? Or the COPYRIGHT SYMBOLS? Sometimes, you don't want the ENTIRE APP to zoom. Sometimes, you just want PART OF IT to zoom. – Elviraelvis 23/4, 2015 at 21:7

@MikeInsch Time for the UK to sue GOOGLE. – Elviraelvis 23/4, 2015 at 21:12

if you are designing a responsive single page web application, the pinch zoom (also automatic zoom) really disturbs the workflow, because the browser automatically zoom in if you accidentally double click on an empty space. – Soulless 7/6, 2015 at 8:18

On my case, I was using the map.net API, and the library failed because they have their own zoom handle, so I was forced to disable the pinch feature on the browser in order to have the correct behavior. – Schumann 10/9, 2015 at 18:19

EVIL!!!!!!!!!!! Don’t be. – Ostensory 29/5, 2019 at 14:10

Does this answer your question? How can I "disable" zoom on a mobile web page? – Oech 25/6, 2020 at 7:39

Disabling pinch zoom on mobile devices is one of the worse things developers had invented. DON'T DO IT! – Tricot 23/1, 2021 at 16:55

From 11years professional experience in the field, I've found many valid reasons to prevent zoom. I dont understand this debate. – Fair 30/6, 2022 at 11:40

Stop judging people who want to use this. I wrote a learning webapp for my kids, with swipe cards. They keep to zoom unwillingly, so I need to disable that feature. That's a perfectly legitimate usecase, and I wager not the only one. – Hutto 12/12, 2022 at 16:56

No offence, but for my case, I am making a simulation, if people zooms in that just breaks everything. The client wants to disable that zoom. Now if browser force fully doesn't allow this, there are many cases where it's problematic. There might be sites with specific audiences or specific needs where zoom should be disabled. There is zoom in functionality on my site as well, but it's for the viewing part of the screen, if the whole screen zooms, that's bad. – Tautomer 5/3 at 2:53

209

EDIT: Because this keeps getting commented on, we all know that we shouldn't do this. The question was how do I do it, not should I do it.

Add this into your for mobile devices. Then do your widths in percentages and you'll be fine:

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

Add this in for devices that can't use viewport too:

<meta name="HandheldFriendly" content="true" />

Cockup answered 27/7, 2012 at 14:6 Comment(18)

i have added that. but still i am able to pinch and zoom. – Impulsive 27/7, 2012 at 14:12

thanks i had a default port value. so it was being over ridden – Impulsive 27/7, 2012 at 14:14

Ah ok. I was going to say it's fine on my phone. – Cockup 27/7, 2012 at 14:15

What is the difference between this and https://mcmap.net/q/80562/-how-can-i-quot-disable-quot-zoom-on-a-mobile-web-page ? – Debutante 31/8, 2013 at 8:44

@Shurane They're different questions? – Cockup 31/8, 2013 at 11:54

Why on earth would you do this? – Psyche 12/12, 2014 at 11:17

@user357320 - The question isn't should we disable pinch zoom on mobile web. We all agree it's a usability faux pas. – Cockup 12/12, 2014 at 11:20

@Cockup - Unless you're programming a web-app that already has pinch-zoom functionality. Then you'd lose your interface the first time you zoomed. Usability, gone! – Elviraelvis 23/4, 2015 at 21:23

@Elviraelvis - Yes, we all know this. I've made an edit to the answer so I don't have to keep saying it. – Cockup 27/4, 2015 at 13:41

@Psyche to avoid a user zooming to a position where their experience suffers. Have you ever accidentally zoomed on a web page? I'm sure you have. We all have. – Earthshaking 8/10, 2015 at 14:48

@MikeMilla I've also accidentally dropped my phone but that doesn't mean I want it covered in foam! – Psyche 8/10, 2015 at 16:27

@Psyche haha! But if I could ensure you (without foam) that when you picked the phone up off the floor it would be in the exact same condition as when it left your hands, I'm sure you'd take me up on that. – Earthshaking 8/10, 2015 at 17:3

@Psyche When you pick up your phone from the ground, even if it's still in one piece, think about your confusion when you discover that you've accidentally zoomed in while holding it by the screen... :) – Buyse 23/10, 2015 at 13:43

@Psyche if your application provides its own zooming idioms (e.g. 3d navigation) – Higa 10/10, 2016 at 19:29

2019: PWA's are a thing now and this is a solution to prevent PWA's having strange behaviors on mobile devices :) – Chirrup 25/1, 2019 at 0:56

It is nice seeing these answers evolve with the web. – Cockup 25/1, 2019 at 11:9

Note that Chrome on Android has a setting under Settings > Accessibility to "Force Enable Zoom". That needs to be unchecked for this and other solutions to work. It was checked by default on my Samsung M51. Other browsers may have similar settings. – Bromism 12/1, 2022 at 15:55

@Chirrup one of the big benefits of a PWA over a native app is automatic handling of UX features such as zoom. If you don't want zoom (or all the other nice features a browser provides for free, such as copy-pasting text, saving, printing, aggressive power management, etc.), consider developing a native app. There are cross-platform frameworks such as Unity for making videogames (99.9% of apps where you wouldn't want pinch-to-zoom are videogames). – Courbet 7/8, 2023 at 22:34

this will prevent any zoom action by the user in ios safari and also prevent the "zoom to tabs" feature:

document.addEventListener('gesturestart', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gesturechange', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gestureend', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

jsfiddle: https://jsfiddle.net/vo0aqj4y/11/

Isostasy answered 6/9, 2018 at 10:23 Comment(1)

This worked on macOS safari, and document.body.style.zoom = 0.99; was not even necessary. – Sedgewake 20/8, 2020 at 19:42

This is all I needed:

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

Felisafelise answered 29/1, 2015 at 3:29 Comment(0)

I think what you may be after is the CSS property touch-action. You just need a CSS rule like this:

html, body {touch-action: none;}

You will see it has pretty good support (https://caniuse.com/#feat=mdn-css_properties_touch-action_none), including Safari, as well as back to IE10.

Walley answered 3/4, 2020 at 9:35 Comment(6)

This will also disable scrolling – Boni 15/6, 2020 at 18:14

To be able to scroll the page use the following. html, body {touch-action: pan-x, pan-y;} – Whenever 2/6, 2021 at 18:32

@БогуславПавлишинець this disables multi-finger scroll – Casefy 18/12, 2022 at 8:51

@Casefy man, go to docs developer.mozilla.org/en-US/docs/Web/CSS/touch-action and figure out what you need yourself. Have a nice day! – Whenever 19/12, 2022 at 9:15

@БогуславПавлишинець it's just an FYI con (in case you are not aware) when using touch actions esp that the topic is mobile web, so multi-touch should be considered. – Casefy 3/1, 2023 at 13:20

Sorry, didn't get it. – Whenever 4/1, 2023 at 12:34

To everyone who said that this is a bad idea I want to say it is not always a bad one. Sometimes it is very boring to have to zoom out to see all the content. For example when you type on an input on iOS it zooms to get it in the center of the screen. You have to zoom out after that cause closing the keyboard does not do the work. Also I agree that when you put many I hours in making a great layout and user experience you don't want it to be messed up by a zoom.

But the other argument is valuable as well for people with vision issues. However In my opinion if you have issues with your eyes you are already using the zooming features of the system so there is no need to disturb the content.

Authoritarian answered 22/10, 2014 at 8:7 Comment(7)

You should make this as a comment. – Suez 20/5, 2015 at 2:27

Sorry, my level at the time didn't allow me to post comments but only new message, that's why. – Authoritarian 25/5, 2015 at 9:32

Setting font-size to 16px on form elements will prevent a zoom on iOS devices. – Planetary 26/5, 2015 at 4:14

I can tell that you are not in your 50s. For many of us, it's not that we have vision issues serious enough such that we have to use special accommodations (even reading glasses), EXCEPT when using web pages on our iPads that designers think are perfect with their tiny fonts. Such pages tell me "I don't care whether you can read this or not, old man." – Piatt 9/7, 2016 at 14:3

i'm an older man with eyesight issues, and yet I totally get why it's needed sometimes. "websites" are not always intended for use by the general public or for every single member of society, in the same way that it would be insane to force every citizen to install wheelchair ramps and unisex toilet blocks in their houses, because "that's the law you know". sure if you are providing public access, or employing people, then those consideration come into play in architecture. there are for example single page web app games that would be ruined by allowing people to zoom in and out. – Airstrip 4/9, 2016 at 4:17

@Airstrip even if you don't care about being able to read a web page with your eyes, the reality is that people who do care vastly outnumber people who want to use a mobile web app where disabling zoom actually is necessary. It is insane to force everybody not to use pinch to zoom just to cater to the handful of cases where it actually needs to be disabled. – Courbet 8/8, 2023 at 16:47

To clarify, what I mean is that ending the option to disable pinch-to-zoom is a much more rational appeal to the majority. It would adversely affect far fewer people and benefit far more than what we have now where disabling pinch to zoom is thrown around willy nilly. – Courbet 8/8, 2023 at 17:0

Unfortunately, the offered solution doesn't work in Safari 10+, since Apple has decided to ignore user-scalable=no. This thread has more details and some JS hacks: disable viewport zooming iOS 10+ safari?

Teat answered 18/12, 2017 at 10:46 Comment(0)

Found here you can use user-scalable=no:

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

Thanasi answered 30/8, 2018 at 8:12 Comment(0)

Disables iOS pinch-zoom

window.addEventListener(
  "touchmove",
  function (event) {
    if (event.scale !== 1) {
      event.preventDefault();
      event.stopImmediatePropagation();
    }
  },
  { passive: false }
);

Tested on iOS 15.3 in Safari and Brave.

Kaspar answered 23/1, 2023 at 22:52 Comment(0)

IE has its own way: A css property, -ms-content-zooming. Setting it to none on the body or something should disable it.

Disable pinch to zoom in IE10

http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx

Incombustible answered 18/6, 2014 at 9:10 Comment(1)

:root/html, not body. – Sterol 19/11, 2017 at 20:7

For anyone still needing this feature, none of the other answers work in newer versions of the iOS. You only need to add this CSS code to the CSS Inline section of your Apex page:

@media screen and (-webkit-min-device-pixel-ratio: 0) {

.apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {

        font-size: 16px;

    }

    .apex-item-select, .apex-item-text, .apex-item-textarea {

        font-size: 16px;

    }

}

It completely fixes the auto-zoom-in problem in the iOS devices.

Seek answered 19/7, 2023 at 12:38 Comment(0)

Try with min-width property. Let me explain you. Assume a device with screen width of 400px (for an instance). When you zoom in, the fonts gets larger and larger. But boxes and divs remains with same width. If you use min-width, you can avoid decreasing your div and box.

Seismism answered 8/9, 2015 at 12:48 Comment(0)

-1

Not sure is this could help, but I solved the pinch / zoom problem (I wanted to avoid users to do zooming on my webapp) using angular hammer module:

In my app.component.html I added:

<div id="app" (pinchin)="pinchin();">

and in my app.component.ts:

  pinchin() {
      //console.log('pinch in');
  }

Aconite answered 29/9, 2020 at 11:26 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags