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 1 Comment | Add a commentComments
1. Frederic at 9: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!!!Add a Comment
Request a Quote
Recent Articles
- Parse Accept-Language to detect a user's language
- Three years of The Future of the Web
- Saving data to a file with PHP
- Easy web scraping with PHP
- See all the articles
- IBM: Where and when to use Ajax
- Code Igniter 1.6.0 Released
- Update a Dev Site Automatically with Subversion
- JavaScript Functions are Variables
- See All...
Older Articles
- 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...
