Lately I was having the “fun” of customizing a website for showing up nicely on the browser, but also on the iPhone / iPod Touch as well. I wanted to do this job without supporting completely new views or html for the mobile device. The solution was, to do some tight customizing of the css-files, in order to show custom portions of content on regular browsers or on the mobile phone. One thing that helps is thinking css-class-definitions just like objects you know from OOP (object orientated programming). Each class got it’s properties, and you can select to show them or not, depending on the device, that is browsing the site. A little bit like adding informed behavior to your plain old html, depending on the browser, that visits the site.
Ok, let’s start! We first need to find out, if the site loads on a mobile like iPhone or not and load custom css, that contains css-data only for the mobile. Follow this tutorial to get a healthy start. It provides a standard-technique to do this task. It’s really simple, it loads a css-file only if the browser-width is smaller than 480 pixels in our case.
Type in
<link media="only screen and (max-device-width: 480px)"
href="iphone.css" type="text/css" rel="stylesheet" />