This first bit of code is a PHP browser sniffing snippet, the actual CSS we’ll use is not brought through via any server side code, we’ll use some CSS media queries for that. What we’ll use this code for is serving the markup with an iPhone specific meta tag and to shorten the current page’s title. max-device-width You want to use 480 pixels for the iPhone and 980 pixels for the iPod Touch.
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
if ($browser == true)
$browser = 'iphone';
What the above code does is sees if the user agent contains any instance of ‘iPhone’ using the strpos PHP function.
Or you could use this:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
Now, as all layouts differ I am going to assume a similar one to mine, a simple two column set up with a logo and menu in the header. If your layout is different I am sure you can quite easily retrofit it. As I mentioned before, remove all stylistic floats and set all widths to 100%. If you are using divs sensibly (i.e. for large bodies of content and not for nav items) this code should see you right for linearising the content:
@media screen and (max-device-width: 480px)