quick n' dirty styles for iPhone
I recently redesigned webchic.net and wanted to tweak the design to look good on the iPhone. While my first thought was to use a JS style switcher triggered by the iPhone's unique WebKit referrer, I decided on a much simpler solution for now.
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />
<!--<![endif]-->
Ultimately, only browsers that recognize screen will understand only, and only the iPhone fits the category of max-device-width: 480px.
On a related side note, I've notice a lot of developers reciting "browser width 320px" in regards to iPhone development. This is a little misleading, since the tilted, horizontal iPhone screen is much more popular when surfing websites and is 480px wide.
Comments