Prevent Page Zooming in Mobile Browsers

Discussion

1. stoimen

   yeah this is well know technique, almost every mobile site is applying it! However if there’s no a mobile version it’s better to omit this tag.
2. eH?

   I personally, find it very annoying when I land a mobile version of a site while surfing on my iPhone. Often times I want to look more closely at photos on a page, and if the site set up to prevent zooming…I can’t see the images.

   I think from a usability standpoint, if we prevent zooming on the page in mobile devices, we have to provide a method for zooming the images.
3. Thomas

   I have been using this for building iPad based web apps (with Mootools of course :) ) where you want to be able to lock the screen down for when you want to include touch events ( http://tabqwerty.com/2010/04/08/supporting-mouse-events-in-mobile-safari.html )

   But I agree with eH? unless you have a good reason to lock the size, you shouldn’t!
4. David Walsh

   @eH?, @Thomas: Agreed — don’t do it if you don’t *absolutely* need to.
5. Dale Greener

   I’m having a strange issue I can’t seem to fix. When I rotate my device (any one I test it in), the page ZOOMS to about 1.5 scale. Even when I use the meta tag you have listed above. I can’t pinch-zoom the page (obviously because of the tag), but it zooms on its own when switching from portrait to landscape (on an iPad), OR when refreshing the page (on an Android phone). Every element in the page is set at a variable width. There are no fixed-width settings. Very strange.
• marko

  hi! i have the same problem when i switch portrait > landscape > portrait. The initial scale meta not work correctly. Do you have fixed this problem? There is a refresh method for this meta?

  Thank you so much!
6. marko

   Hi! i have the same problem with this META. When i switch between landscape and portrait on iPad the viewport not work. For example if i set an initial-scale like “0.8”, than switch to portrait and come back to landscape, the visualization not work. Change to “1”.
   I can fix this? There is a method to refresh this meta?

   thank you so much!
7. Entrepro

   Hey that was a great help David! Thanks!

   I was having trouble getting the site to show up with proper scale on mobile devices. Using your blog as the basis I ended up doing the following:

   


8. Entrepro

   Hey that was a great help David! Thanks!

   I was having trouble getting the site to show up with proper scale on mobile devices. Using your blog as the basis I ended up doing the following:
9. Brad

   Just needed to use this for a site that is going online soon. Works great!
10. sgia

    I think the most useful aspect of this is the initial-scale setting. If I have content I want to display at a certain, optimum zoom factor (maybe based on the available resolution) as a DEFAULT, I can do this, while still allowing the user to Zoom in or out, like Eh? stated, I too find it annoying when a standard functionality is blocked.
11. Longsoul

    I find that not being able to zoom renders some mobile access to websites unusable. As I am keying this comment on my IPhone, the font size is maybe 1 – almost unreadable. Besides readn and writn – you often get very little detail in photos. Very frustrating.
12. Jaime

    Thanks for the META tag I applied to my project iam currently working on and is working perfect
    thanks again

    Jaime
13. Yo

    I tried your test page with iPhone, old BlackBerry, and couple android devices.
    Although it works fine on iPhone and BB, Android 2.3 (htc stock browser + dolphin browser) was still able to zoom in. Is there any alternative that’ll work for android devices?
14. johes

    It does not work with iphone app which is using phonegap .
    Any ideas?
15. bc

    Obviously this page is one that absolutely must not be zoomed. /sarcasm Now how do I configure my browser to disregard this idiotic “feature”?
16. kay

    I’m having a night mare with the zooming issue most of my web pages opens OK on android device but there is one particular page keep zooming automatically on opening page:
    Thanks for your info.
17. Irvingoe

    yes, i can o_O on my galaxy ace
18. Jeff

    Demo allows me to zoom on my EVO, Android 2.3.5.
19. Tim Richards

    I don’t get it. When is it ever a good idea to block zooming? On this locked page for example, I can barely read the comments in their tiny font size. Not everyone has perfect eyesight, and why the hell shouldn’t users be able to zoom if they want to anyway? Sounds like pointless control freakery to me.
• David Walsh

  Mobile games is a perfect example of where you wouldn’t want page zooming.
• Fred

  Whenever you employ any method similar to fixed navigation across the top (like Facebook and Instagram), preventing page zooming keeps your web page from acting up when the user zooms in. The navbar will freak out and quiver and shake, in the meantime often taking over the screen.
20. AaronLS

    Disabling zooming comes from the flawed logic that mobile==small, and thus you think you know exactly what size your user wants. Many mobile devices are large enough that I can zoom out and see more of the Page and the text is still readable. We have this rich framework of web technologies and scalable elements, but decide we’re going to amputate features like some 1800’s doctor.
21. kevin

    Hi David
    I am despareate need of help.
    My site is ok at desktop and scales OK for tablet – but looks awful at phone level.

    I would like my site to not re-size at all just at phone level – How do I do this?

    At present my settings are….

    Is this possible

    Thanks a lot.

    Kevin
22. Dan

    If you are not a fan, why does this post prevent zooming?
23. saurabh

    It doesnt work for me.
    I used the meta tag as
    

    but it still zooms out.
    I have used a long text in page and it doesnt wrap it instead it zooms out.
• saurabh

  I also added “minimum-scale=1” to the above meta tag. Still no help
24. saurabh

    ” “
25. Rituraj

    I am using Android mobile. I have added this tag but it seems not working.
• Fred

  I noticed this too. HTC? This tag doesn’t work with HTC devices for some reason. I had to either add a new tag or just not worry about HTC users.
26. danny

    how can you work around this? I would like a browser which disregards such limits. its like when you can’t fast forward on a DVD, the device is entirely capable yet some control freak has purposefully handicapped my system. let me do what I like!
27. Pooka

    Any web designer preventing zoom should have thir teeth kicked down throat.
28. Nathan Hillery

    For the love of god*, please do not disable zooming.

    * – Not to mention your users

    And if anyone knows how to let me view the content the way I (and my aging eyes) want to, please share it with the world.
29. Nathan Hillery

    “Search, and ye shall find” – A workable solution is here: http://apple.stackexchange.com/questions/28391/how-can-i-force-pinch-to-zoom-on-some-websites/46973#46973

    1. Create a bookmark, naming it something like “+Zoom”
    2. Edit the bookmark to change the URL to
    javascript:document.querySelector(‘meta[name=viewport]’).setAttribute(‘content’,’width=device-width,initial-scale=1.0,maximum-scale=10.0,user-scalable=1′);
    3. When you encounter an offending page, “Open” the +Zoom bookmark & voilà!

    Thank you, people who are much smarter & more digilent than me!
30. john

    Don’t work!
31. Gus

    Dear David,
    Thank you for your suggestion but I have one inconvenient using this tag.
    I’m not english speaker and I will try to explain my problem in the better way I can.

    I’m designing my first responsive website using CSS. Until now the things are going slow but fine.

    My first test page is responding correctly in all widths of the desktop browsers, including narrowing them until its smaller width. After this I loaded the page in my NOKIA 5800 smartphone that uses Symbian.

    My main problem is the following:

    The test page is loaded correctly and when I rotate the phone, the page adapts it internal elements to the new width.
    It is fine, BUT……… when i zoom the page (double clicking on the screen), the page is zoomed and the browser narrows again the internal elements to the new more narrow width
    and I dont want the page be responsive in zoom.
    I want the elements only be zoomed when I zoom the page.
    Am I explaining correctly?
    My page appears to be so much responsive!!!!! :) including when I zoom it!

    In other words…. even the page adapts DIVs (etc) at the more narrow width on desktop browsers, the problem is when I zoom in smaller screens (smartphone), because some elements are additionally narrowed and it is so much .

    But remember I’m not talking about an iPad or iPhone or other more modern smartphones or tablets.
    I’m making this first tests on a Nokia 5800 using Symbian, but I think this zooming problem can be solved too, including in this Symbian smartphone.

    Are there some way in CSS or HTML to avoid this responsive effect when I zoom, specially in resolutions of 320px or 400px???
    And….
    Could I use two viewport tags?, for example:

    and

    Do you have some suggestion?

    I hope I have explained this issue clearly so that someone can help me.
    Thank you!
32. rkat1

    I see no advantage in disabling zoom.
    As user, I disdain sites that disable zoom.
33. Ian MacGregor

    To prevent scaling between landscape and portrait views, try this in your CSS (this worked on my iPhone 5):

    html, body {
       -webkit-text-size-adjust: none;
       }
    
34. Paul Doherty

    This is a stupid feature that serves only to annoy your users and make them not want to frequent your site.
• Paul Doherty

  And to be clear, by “feature” I mean the topic being discussed, whereby website owners are actively disabling a feature of their client base. Very annoying and pointless and, as I mentioned sure to make some users stop coming to your site altogether.
35. Henko

    Ever heard of a thing going on called mobile web apps or hybrid mobile apps? Locking zoom should be standard on apps that you download from Appstore/Play etc. If you need zoom in a mobile app, then you have developed it bad and its a poor designed app in that case. Content in apps should be adjusted for screen size (and if people have bad eyes, put a damn button for bigger text-size. simple.) and there should be NO ZOOM. So… I think the discussion about stupid/not stupid feature is stupid.
• Bob

  Exactly!!
• What Haveyou

  “Content in apps should be adjusted for screen size (and if people have bad eyes, put a damn button for bigger text-size. simple.”

  WRONG, and ignorant. So now you’re cluttering up your “optimized” mobile site with space-robbing buttons to correct design mistakes? Why in the hell should every Web page now put font-size buttons everywhere, when zoom functionality has been standard for eight years?

  And how, pray tell, will you let users zoom into pictures on your site so they can see details on a dinky phone screen? Another button?

  Create an appropriate layout for your mobile page and be done with it. Why on earth would you disable zooming? Designers who do this are incompetent. It’s that simple.
36. Annoyed User

    I hope one of the browsers develops a blacklist for sites that actively block what is classed as “basic browser functionality” on mobile devices. If you prevent my device from performing as it should, then tablet users should have the right to block your site from being accessed. Marking sites like this one as “Mobile unfriendly” and for that to be held in a central repository, would be a welcome function. Clearly “anti-mobile” sites need to feel the repercussions from their hostile actions. I didn’t pay £400 for some half-assed site to render functions useless. How would you feel if all desktop browsers blocked text-zooming? Or is it that you just consider people with visual disabilities unworthy of reading your content? That’s more commonly know as “discrimination”.
• What Haveyou

  That’s EXACTLY what Google should do, and yet those hypocrites disable zooming ON THEIR OWN PAGES. After declaring that they’ll punish sites that aren’t “mobile-optimized,” they purposefully degrade their own on mobile browsers.

  Unbelievable.
37. Wireball

    I utterly loathe sites that lock panning or zooming, or remove elements based on the width of your browser, and I find other sites to go to.

    I’ve been digging around trying to find ways to get my mobile browser to report that it’s running on a much larger device than it is, so that I can see the site the same as it would appear on a desktop (and just pan around and zoom in on the parts that I want), but no dice.
38. Pooka

    I just have a bookmarklet that overrides zoom blocking, so, yeah, fuck you and your dictatorial attitude about what is the best font or image size for billions of other people.

    Web designers are all idiots. 90% of the sites I see these days look and act like they were designed by chimps.
39. Pooka

    The bookmarklet is this

    javascript:document.querySelector('meta%5Bname=viewport%5D').setAttribute('content','width=device-width,initial-scale=1.0,maximum-scale=10.0,user-scalable=1');
    

    It’s called “fuckwebdesigners” in my bookmark list. :)
40. Jason

    This is fine to disable zoom with a web app if your web app is doing its own zoom features.
41. Trlkly

    Well, congrats. You are permanently adblocked for using this. You admit it’s bad, but you did it anyways. Fuck you.

    Taking away user control means you are a dick. It has no legitimate purpose but to be a tyrant.
• Dan Dascalescu

  To people who yell that there’s no reason absolutely whatsoever to use this technique – I agree taking away control from the user is bad. But there are legitimate use cases for when you want to disable page-level zoom.

  The general use case is that you use a component that handles zoom itself in an intelligent way. For example, an embedded map will truly zoom in when you pinch zoom, instead of just making street names bigger. If you have some controls overlaid on that map (e.g. “Order pizza to this place”), you will want to disable page zoom, and let the map handle zooming.
42. Strablet

    Just came across this problem for the first time. I’m exploring some super-cool page animation such as fullPage. fullPage lets you scroll on page at a time on your website. Looks awesome on my laptop, but sucks on my mobile because zooming is blocked. You see, if you zoom, pages can’t be scrolled one at a time, as far as I know. Also, although I love the fullPage animations, doesn’t work well in landscape mode. Resizes the text to tinyville.

    Look at how this page works on laptop and mobile. On mobile, I think they just turned fullPage off!

    http://www.sony-asia.com/microsite/mdr-10/#.VMytnmiUeSo

    That is probably one of the coolest websites I’ve ever seen. Too bad it can’t work on mobile.
43. jonny

    Why the hell would anyone in the right mind ever want to disable zooming? The use of disable zoom in mobile games don’t make any sense to me. The game designer should try to design something that is actually suitable for play on websites.
44. Dan Neamtu

    Works very well, you can create with jQuery some classes that can zoom images.
45. Wireball

    Dolphin Jetpack for Android has a “force enable zoom” under Advanced Options.
    I still wish it supported zooming *out* to a thousand-meter view, but it’s a welcome addition, and I can turn it off on the rare occasions that it’s a problem. :)
46. Francis Kim

    Still working well in 2016!
47. WillyC

    This technique is the most annoying thing ever. The fact this page uses it and has absolutely no reason to points to some arrogance that you think a user shouldn’t be able to make adjustments to your precious design. Get over yourself.

    Stop using user-scalable=0 unless you have a real reason! There is no reason on this page!
48. Alba56

    Fortunately you can override this technique, which is indeed arrogant, stupid and utterly annoying. This works at least in Chrome on my Android Samsung Tab A: Settings/Accessibility/Force enable zoom.
49. milo

    We’re working on an html-only site for use on a kiosk touch screen at a tradeshow event. This may be the only place to disable zooming in/out. We want users to touch through the interface we’ve designed, and to not accidentally screw up the design by pinching and zooming in/out … i’ve tried the meta tags in the header but it seems users can still pinch zoom in/out… scratching my head on this one. maybe just having someone babysit the kiosk and press Crtl-0 to (on the hidden keyboard) if there is indeed pinching/zooming that messes up the presentation is the best bet…
50. John

    This is like table-based design in the 90s. Absolutely annoying. Thank god, Chrome let you override this “Feature”.
51. Thomas King

    It’s hilarious how many of you want to control how big my browser displays, and then, boo boo, you complain when your browser doesn’t obey you!!! Yes, that’s how every single person planet-wide feels when some jackass programmer decides what *I* want on *my* phone.
52. amit

    Thanks you saved my day !
53. anon

    some irony in that THIS page is zoom locked. on a phone, had to skip reading it….
54. nRon

    Is there any way I can lock zooming for a part of my page while allowing for rest of the page. I know it sounds stupid, but I am working on something and this feature if implemented would be really cool.
55. Marvin

    Are there any workarounds for iOS 10.*?
56. Really

    Anyone who disables zoom on mobile sites deserves to be impaled. You are literally the scum of the earth.
57. Brian

    I hate no zoom mobile sites! Stop teaching the nonsense of not zooming. If there is an image I want to zoom. If it’s on my screen I want to zoom. It’s a natural feature of my phone, stop designing it away for your pixel perfect ideal world.
• Eduard Ungureanu

  I totally disagree with you. On mobile zoom in / out is bad practice, in my opinion, you should have the layout in such a way the user will not have to zoom in/out.
• Mazed Khan

  So true. i hate zooming in and out all the time and i end up pressing something by mistake , its just so messy.
58. SzFJ

    Disabling zoom on mobile pages is the most stupid thing ever.
    For some unknown reason, on Chrome for Android, there is a setting “Force enable zoom” and is unchecked by default.
59. Yaroslav Sterkhov

    “320 or 480″… there is so much wriong about that. Essentially sites that go that way are unusable or un-navigable on tablets or most of s,artphones if they go that way. You can’t have that assumption because inherent screen sizes may go up to 2k resolution and devices now can show image on external screen.
60. Eduard Ungureanu

    If if a website has that meta key in its header, it doesn’t work anymore. Especially in WordPress, so I guess now this kind of usability is being controlled by the browser? Any thoughts on that?