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