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 at 2007-12-09T08:23:27.000Z

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 at 2008-06-13T15:42:59.000Z

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 at 2008-07-28T03:18:56.000Z

elstiko

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

4 . Matthew Evans at 2009-01-04T07:47:06.000Z

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 at 2009-01-19T13:15:07.000Z

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 at 2009-02-26T16:33:07.000Z

Anand Mahajan

Really Nice!!!

Thanks a lot!!!

7 . Martin at 2009-03-27T08:05:20.000Z

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 at 2009-03-31T02:45:41.000Z

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 at 2009-06-03T05:24:12.000Z

Gopal Raju

Thanks buddy. Exactly what I was looking for!

10 . John Schroeder at 2009-06-05T20:55:40.000Z

John Schroeder

How AWESOME is that!?

11 . Lauren at 2009-08-17T18:14:08.000Z

Lauren

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

12 . Stuart Smith at 2009-09-30T17:19:39.000Z

Stuart Smith

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

13 . mike at 2009-10-14T02:22:57.000Z

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 at 2009-11-19T04:53:59.000Z

Larry

Just here to add to the thank yous!

15 . Rob at 2010-02-02T15:43:25.000Z

Rob

Exactly what I needed to know - thanks!

16 . mtngoatjoe at 2010-02-09T01:02:31.000Z

mtngoatjoe

Awesome!!! Thanks for the help.

17 . Brant at 2010-02-18T17:18:42.000Z

Brant

perfect.

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

18 . Simon Dell at 2010-04-06T09:33:53.000Z

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 at 2010-05-27T10:12:35.000Z

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 at 2010-07-12T00:09:07.000Z

Ryan

thank you so very much!

21 . XTIAN at 2010-07-14T04:56:15.000Z

XTIAN

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

22 . Albert at 2010-08-24T22:21:38.000Z

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 at 2010-10-08T15:38:21.000Z

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 at 2010-10-25T11:16:18.000Z

S Quinn

Jesse, you is the daddy!!

25 . B at 2010-11-30T05:26:54.000Z

B

sweet, thanks

26 . Jaydevsinh Gohil at 2011-01-18T09:31:23.000Z

Jaydevsinh Gohil

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

27 . Larissa Janssen at 2011-02-01T15:00:08.000Z

Larissa Janssen

Super! Thank you very much!

28 . Saurabh Bongale at 2011-05-19T09:52:29.000Z

Saurabh Bongale

awesome... thanks a ton...

29 . And at 2011-05-26T13:50:00.000Z

And

Thank you! That helped!!

30 . JS at 2011-11-03T04:41:54.000Z

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 at 2012-03-28T05:59:19.000Z

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 at 2012-04-19T16:03:22.000Z

Matt

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

33 . Terrill Ray at 2012-06-21T03:30:04.000Z

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.