scriptygoddess

On a project I was working on recently, I was pulling in some css for iPhone users using PHP with the following code:

<php if (strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")) { ?>
... CUSTOM CSS FOR IPHONE...
<php } ?>

This will also work for iPhones and iPod Touch:

<php if (strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) { ?>
... CUSTOM CSS...
<php } ?>

That's great and all – but then suddenly one day it stopped working. Going back through what changed on the site, I realized one thing we added was a cache plugin. DOH! So the page gets cached without the custom CSS for the iPhone – the iPhone calls up the site but gets served the cached page (non-iPhone version)… Yeah, that would do it.

So I found this solution:

<!--[if !IE]>-->
<style type="text/css">
@media only screen and (max-device-width: 480px) {
.... CUSTOM CSS HERE....
}
</style>
<!--<![endif]-->

or of course you can pull in a whole stylesheet for the iphone:

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="iphone.css" />
<!--<![endif]-->