CSS Optimization for iPod and iPhone Safari

Building out applications that are optimized for iPod or iPhone use is a great way to dip into an exploding market with over 1 billion downloads to date. It’s important to realize that those numbers don’t include browser-based applications that are optimized for Safari on iPhone or the iPod Touch and require no download.

Today I bit the bullet and purchased a 16Gb iPod Touch to begin checking out the platform for both Safari and Apps. Sure… I was excited that I can watch movies on the road and the iPod Touch can act as a remote for my AppleTV, too!

My first task at hand was updating my Salary Calculator for use with Safari on the iPod Touch or the iPhone. It’s an application I’ve built in virtually every language… so it’s time that I began learning development for Safari and learning the Apps framework.

Interestingly enough, bringing up the page in Safari didn’t automatically utilize the media=handheld css settings, so I had to write some server-side scripting in PHP to use the appropriate stylesheet:

>link rel="stylesheet" media="screen" href="iphone.css" type="text/css" />
>?php } else { ?>
>link rel="stylesheet" media="screen" href="style.css" type="text/css" />
>?php } ?>

I’ve got the page looking pretty good, but I know there’s a ton of iPhone and iPod Safari CSS arguments I can utilize, even shifting components based on whether the page’s orientation is landscape or portrait. I’ll continue to experiment!

Got an iPhone or iPod Touch? Try out the Salary Calculator and let me know how it looks for you! Keep in mind virtually all the changes between the page were made with CSS only! It may have been easier to simply write an entirely new page – but not as challenging.