Brock's Software Engineering Blog

Since the iPhone is the greatest thing ever and will one day solve all of the world’s problems, I figured I should get brockbouchard.net up and running with an optimized site that automatically displays when browsing on an iPhone.  Sure enough, Rails makes this very eay.  Thanks to a great article on slashdotdash.net, I didn’t even have to discover for myself how easy this was:

http://www.slashdotdash.net/2007/12/04/iphone-on-rails-creating-an-iphone-optimised-version-of-your-rails-site-using-iui-and-rails-2/

I then said to myself that I wanted my site to behave as follows:

1. Occupy the width of the iPhone’s screen
2. When the device is rotated, expand the width of the site and have flow content adjust accordingly (and do not zoom in on content)

This how the iPhone version of ESPN’s website behaves, and is something I wanted to mimic.  However, this is where all of the “easy” came to a crashing halt.

I googled around, eventually finding a link to Apple’s official support pages for building iPhone-specific sites:

1. http://developer.apple.com/safari/
2. http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/index.html
3. http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html#//apple_ref/doc/uid/TP40002079-SW1

While generally helpful, nothing in any of those articles, or the articles immediately linked to those, helped to answer my problem.  With everything I tried, my site would always stay the same absolute width, zooming in on the content when I rotated.  I eventually stumbled upon a reference of all of the viewport settings one can apply to Mobile Safari:

1. http://devworld.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Sure enough the answer is to use the maximum-scale setting and set it to 1.0:

<meta name="viewport" content="maximum-scale = 1.0, user-scalable = no, width = device-width" />

Maybe it was my fault, but I feel like it was way to hard and took way too long to find that piece of information :/

One last thought: I found the iPhone’s screen to render colors in a much “darker” fashion than on my iMac.  Even with the brightness all the way up on the iPhone, and the brightness toned down on the iMac, I still found I had to use a separate set of “brighter” colors for the iPhone site to compensate for its screen.  Thus when developing an iPhone site it is important to test it on the actual device itself, and not solely on any of the various simulators out there!