Avoiding web page zoom in the iPhone and iPod Touch
Sep 7 2007I've been doing a bit of experimentation with web pages in the iPhone, and I've realised the first major problem is trying to prevent the iPhone from zooming way out on a web page, making it rather difficult to work with and more difficult to read.
One would assume that a 100%-width layout would be good enough for the iPhone's Safari to stop setting the browser width to 964px. But alas, it's not.
I had a look at probably the best iPhone app out there right now, Joe Hewitt's Facebook for the iPhone. Joe was awesome enough to release iUI, a collection of CSS, JavaScript and images for making user interfaces that match the look and feel of the iPhone.
I spent some time dissecting his examples, and eventually realised it wasn't the CSS nor the JavaScript which was able to stop the iPhone Safari from resizing. It was just a
<meta>tag in the<head>:<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
It turns out this was all well documented on Apple's site, iPhone for Web Developers. There are lots of other techniques discussed like how to specify stylesheets and integrate with the built-in Google Maps application.
I hope that other device manufacturers implement things like the
<meta name="viewport">tag and the only-for-certain-widths stylesheets. The iPhone may not end up in everyone's pocket, but we will need to make web sites and applications that work across an ever-wider range of devices.View 22 Comments | Add a commentComments
1. Frederic at 3:23am on December 9, 2007
Wow, this is what I've been looking for :-)
Great! Now I can make my own (non-tiny) webpage for ipod touch :D
Tnx!!!2. Nathan at 11:42am on June 13, 2008
Thanks a ton, I'm not very html literate, and have been trying to modify a page created in iWeb for use on iPhones. I've found peices and parts of what you explained here, but I finally got the result I have been looking for when i copied your string of code.
THANKS!!!!!!
nathan4. Matthew Evans at 2:47am on January 4, 2009
Worked for me, just copy that into the head of your document
so ex:
<html>
<head>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
</head>
<body>
<p>text here!</p>
</body>
</html>
get it??5. James Jamieson at 8:15am on January 19, 2009
So I worked a lot of my weekend on an iPhone web applications only to find I had to "zoom in" to it. My first Google search and you supplied the answer!! Thanks!
6. Anand Mahajan at 11:33am on February 26, 2009
Really Nice!!!
Thanks a lot!!!7. Martin at 4:05am on March 27, 2009
Also note that if you want the page to resize when you rotate the iphone / ipod touch you need to change the width from "width=320;" to "width=device-width;" :)
8. techguy at 10:45pm on March 30, 2009
THANK YOU!
Been bulding something putting alot of time into it, im a tech so no iphone for me only win mobile but tried my site on a friends iphone and was disappointed to see it all tiny in the corner.
Adding this line of code between the <head> and </head> did the trick.
Thanks again!10. John Schroeder at 4:55pm on June 5, 2009
How AWESOME is that!?
12. Stuart Smith at 1:19pm on September 30, 2009
Many thanks for that helpful tip. Sadly the iUI link is no longer valid. But incredibly useful.
13. mike at 10:22pm on October 13, 2009
donnot anderstand
can you teauch me
my ipod touch site is http://www.superbipod.com
my email z8872095@gmail.com
give me a email thanks14. Larry at 11:53pm on November 18, 2009
Just here to add to the thank yous!
16. mtngoatjoe at 8:02pm on February 8, 2010
Awesome!!! Thanks for the help.
17. Brant at 12:18pm on February 18, 2010
perfect.
special thanks to Martin for the "change the width from "width=320;" to "width=device-width;" :)" tip18. Simon Dell at 5:33am on April 6, 2010
What a rubbish development tool. Sure, it makes it easier to make "attractive" web pages for the iPhone, but for those of us with less-than-perfect eyesight, it makes websites near-to-unusable.
The iPhone's pinch-to-zoom is the major accessibility feature the device has over other phones (well, it did when it was new ;-) ). I accept that having a page load "small" and needing to zoom in to view it is slightly annoying for normal-sighted users, but imagine how frustrating it is for those who can't read the site easily when it loads and then CAN'T zoom in.
Using this meta tag reduces your audience, makes your site less-usable/more frustrating. and lowers the overall user experience of the device for a great number of people.19. Nilesh at 6:12am on May 27, 2010
Really nice one. only one issue i face is when i use horizontal display width is not changing to 100% of screen
21. XTIAN at 12:56am on July 14, 2010
Thanx a lot for the tip! you really made my day =]
22. Albert at 6:21pm on August 24, 2010
Thank you, 3 years after you wrote this article you're still helping folks thanks to Google indexing you instead of the apple developer site.
Add a Comment
Recent Articles
- jQuery Live Events
- I need web developers
- buttons need type="submit" to submit in IE
- Win $200 in a Web Dev Writing Contest
- Use Arrays in HTML Form Variables
- 5 Reasons Freelancers Can Succeed in a Shrinking Economy
- Keeping a Live Eye on Logs
- Using PHP's empty() Instead of isset() and count()
- Testing Web Pages with Lynx
- Stop CSS Background Flickering in Internet Explorer 6
- See All...
Older Articles
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- July 2008
- June 2008
- May 2008
- April 2008
- February 2008
- January 2008
- December 2007
- November 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- June 2006
- May 2006
- April 2006
- March 2006
- February 2006
- January 2006
- December 2005
- November 2005
- October 2005
- September 2005
- August 2005
- April 2005
- See All...
