Coding with Jesse

Avoiding web page zoom in the iPhone and iPod Touch

September 7th, 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.


Interested in web development? Subscribe to my newsletter!

Comments

1 . Frederic on December 9th, 2007

Frederic

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 on June 13rd, 2008

Nathan

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 on July 27th, 2008

elstiko

Doesn't work for me! Why, oh why?!?

4 . Matthew Evans on January 4th, 2009

Matthew Evans

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 on January 19th, 2009

James Jamieson

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 on February 26th, 2009

Anand Mahajan

Really Nice!!!

Thanks a lot!!!

7 . Martin on March 27th, 2009

Martin

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 on March 30th, 2009

techguy

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 on June 3rd, 2009

Gopal Raju

Thanks buddy. Exactly what I was looking for!

10 . John Schroeder on June 5th, 2009

John Schroeder

How AWESOME is that!?

11 . Lauren on August 17th, 2009

Lauren

Woot... I love it when a plan comes together... thanks!

12 . Stuart Smith on September 30th, 2009

Stuart Smith

Many thanks for that helpful tip. Sadly the iUI link is no longer valid. But incredibly useful.

13 . mike on October 13rd, 2009

mike

donnot anderstand
can you teauch me
my ipod touch site is http://www.superbipod.com
my email [email protected]
give me a email thanks

14 . Larry on November 18th, 2009

Larry

Just here to add to the thank yous!

15 . Rob on February 2nd, 2010

Rob

Exactly what I needed to know - thanks!

16 . mtngoatjoe on February 8th, 2010

mtngoatjoe

Awesome!!! Thanks for the help.

17 . Brant on February 18th, 2010

Brant

perfect.

special thanks to Martin for the "change the width from "width=320;" to "width=device-width;" :)" tip

18 . Simon Dell on April 6th, 2010

Simon Dell

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 on May 27th, 2010

Nilesh

Really nice one. only one issue i face is when i use horizontal display width is not changing to 100% of screen

20 . Ryan on July 11st, 2010

Ryan

thank you so very much!

21 . XTIAN on July 14th, 2010

XTIAN

Thanx a lot for the tip! you really made my day =]

22 . Albert on August 24th, 2010

Albert

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 on October 8th, 2010

Scott

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 on October 25th, 2010

S Quinn

Jesse, you is the daddy!!

25 . B on November 30th, 2010

B

sweet, thanks

26 . Jaydevsinh Gohil on January 18th, 2011

Jaydevsinh Gohil

Thanks a lot !!!. It's work like charm for me.

27 . Larissa Janssen on February 1st, 2011

Larissa Janssen

Super! Thank you very much!

28 . Saurabh Bongale on May 19th, 2011

Saurabh Bongale

awesome... thanks a ton...

29 . And on May 26th, 2011

And

Thank you! That helped!!

30 . JS on November 3rd, 2011

JS

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 on March 28th, 2012

Simon Kinslow

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 on April 19th, 2012

Matt

Thank you for posting it. It was driving me nuts that the 100% width layout was still appearing zoomed out.

33 . Terrill Ray on June 20th, 2012

Terrill Ray

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.

Comments are closed, but I'd still love to hear your thoughts.