The Future of the Web » Avoiding web page zoom in the iPhone and iPod Touch » Web Development with JavaScript, jQuery, PHP and MySQL

Avoiding web page zoom in the iPhone and iPod Touch
Sep 7 2007
I'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 33 Comments | Add a comment
Comments

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

nathan
3. elstiko at 11:18pm on July 27, 2008

Doesn't work for me! Why, oh why?!?
4. 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!
9. Gopal Raju at 1:24am on June 3, 2009

Thanks buddy. Exactly what I was looking for!
10. John Schroeder at 4:55pm on June 5, 2009

How AWESOME is that!?
11. Lauren at 2:14pm on August 17, 2009

Woot... I love it when a plan comes together... thanks!
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 thanks
14. Larry at 11:53pm on November 18, 2009

Just here to add to the thank yous!
15. Rob at 10:43am on February 2, 2010

Exactly what I needed to know - thanks!
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;" :)" tip
18. 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
20. Ryan at 8:09pm on July 11, 2010

thank you so very much!
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.
23. Scott at 11:38am on October 8, 2010

Thanks! This is perfect for letting my iPhone visitors see the site as I intended!

Note to the naysayer, you can adjust the tag to allow for individuals to zoom in, or out. If you just cut and paste and expect it to work in every application, then you are truly ignorant. While ignorance may be bliss, it also is the spawning pit for @$$holes.
24. S Quinn at 7:16am on October 25, 2010

Jesse, you is the daddy!!
25. B at 12:26am on November 30, 2010

sweet, thanks
26. Jaydevsinh Gohil at 4:31am on January 18, 2011

Thanks a lot !!!. It's work like charm for me.
27. Larissa Janssen at 10:00am on February 1, 2011

Super! Thank you very much!
28. Saurabh Bongale at 5:52am on May 19, 2011

awesome... thanks a ton...
29. And at 9:50am on May 26, 2011

Thank you! That helped!!
30. JS at 12:41am on November 3, 2011

Even after 4 years your post is still much appreciated! This worked like a charm. I can also confirm that it works on my Android phone as well! Seems like your wish for other device manufacturers to adopt this came true!
31. Simon Kinslow at 1:59am on March 28, 2012

Love the part "The iPhone may not end up in everyone's pocket" how things have changed! Thanks very much fixed the project I'm working on beautifully!
32. Matt at 12:03pm on April 19, 2012

Thank you for posting it. It was driving me nuts that the 100% width layout was still appearing zoomed out.
33. Terrill Ray at 11:30pm on June 20, 2012

Yes, thank sou. I REALLY appreciate the efforts of website/page designers to render their pages useless to me. I have difficulty with my eyes making is extraordinarily difficult to read text as displayed on many of your fixed-zoom web pages. Instead of arrogantly assuming that your brilliant layout works for all users, you should allow the users to zoom in or out as they please so that your webpage is useful to them. You are not Michelangelo or Van Gogh, and any idea you have that your layout is such a work of art as to forbid any alteration in presentation through zoom is very arrogant and represents and anti-user mentalitty.

Commenting is now closed.