Treehouse

Prevent Page Zooming in Mobile Browsers

By on  

Ever since I got my iPhone, I've been more agreeable in going places that my fiancee wants to go. It's not because I have any interest in checking out women's shoes, looking at flowers, or that type of stuff -- it's because my iPhone lets me surf the web the whole time...or until my iPhone's tiny battery dies. It wasn't until recently that I noticed that some sites don't allow the user to zoom in and out of a page. After some research I found that preventing page zooming was as easy as adding a META tag to the page.

The META HTML Tag

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->

That's as easy as it gets. According to Mozilla, mobile browsers are generally set to a size of 320 or 480. The maximum scale keeps the scale settings when the user switches from portrait to landscape view.

If you'd like to see this in action, grab your phone/mobile browser and hit:

http://davidwalsh.name/demo/mobile-viewport.php

I'm not huge fan of preventing the user from enhancing their experience but your web application may need to stay a given size. Now you know how to do so!

ydkjs-1.png

Recent Features

  • Create Namespaced Classes with&nbsp;MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each...

  • CSS vs. JS Animation: Which is&nbsp;Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native...

  • Camera and Video Control with&nbsp;HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of...

Incredible Demos

Discussion

  1. 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. 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. 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. @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. 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. 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. 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. 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.

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

  20. 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.

  26. 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!!

  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”.

  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. :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Use Code Editor