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/dw-content/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!
Comments
Be Heard!
Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!
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.