Prevent Page Zooming in Mobile Browsers
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:
https://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!
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.
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.
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!
@eH?, @Thomas: Agreed — don’t do it if you don’t *absolutely* need to.
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.
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!
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!
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:
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:
Just needed to use this for a site that is going online soon. Works great!
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.
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.
Thanks for the META tag I applied to my project iam currently working on and is working perfect
thanks again
Jaime
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?
It does not work with iphone app which is using phonegap .
Any ideas?
Obviously this page is one that absolutely must not be zoomed. /sarcasm Now how do I configure my browser to disregard this idiotic “feature”?
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.
yes, i can o_O on my galaxy ace
Demo allows me to zoom on my EVO, Android 2.3.5.
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.
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.
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.
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
If you are not a fan, why does this post prevent zooming?
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.
I also added “minimum-scale=1” to the above meta tag. Still no help
” “
I am using Android mobile. I have added this tag but it seems not working.
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.
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!
Any web designer preventing zoom should have thir teeth kicked down throat.
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.
“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!
Don’t work!
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!
I see no advantage in disabling zoom.
As user, I disdain sites that disable zoom.
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; }This is a stupid feature that serves only to annoy your users and make them not want to frequent your site.
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.
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.
Exactly!!
“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.
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”.
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.
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.
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.
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. :)
This is fine to disable zoom with a web app if your web app is doing its own zoom features.
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.
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.
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.
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.
Works very well, you can create with jQuery some classes that can zoom images.
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. :)
Still working well in 2016!
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=0unless you have a real reason! There is no reason on this page!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.
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…
This is like table-based design in the 90s. Absolutely annoying. Thank god, Chrome let you override this “Feature”.
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.
Thanks you saved my day !
some irony in that THIS page is zoom locked. on a phone, had to skip reading it….
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.
Are there any workarounds for iOS 10.*?
Anyone who disables zoom on mobile sites deserves to be impaled. You are literally the scum of the earth.
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.
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.
So true. i hate zooming in and out all the time and i end up pressing something by mistake , its just so messy.
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.
“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.
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?