Different CSS and JS for PC, iPad, and iPhone

October 17, 2010

I’m working on a webapp that will run on PCs, iPad, and iPhone. To get the optimum experience for each, I have some styles and JavaScript that I want to run on each, some that are only for iPad, some only iPhone, and some for a combination of the above. Here’s the patterns I’m using to implement this.

JavaScript is easy: I just use regular user agent detection to determine which platform we’re on.

function iOS() { return null != navigator.userAgent.match(/(iPad|iPhone)/i); }
function iPad() { return null != navigator.userAgent.match(/(iPad)/i); }
function iPhone() { return null != navigator.userAgent.match(/(iPhone)/i); }

CSS is a bit more complicated, but not much. I’ve found recommendations for how to target CSS specifically to iPad and iPhone. But really the iPad one is for all iOS devices, so I end up with an iOS CSS file and an iPhone CSS file:


<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 1024px)" href="iOS.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="iPhone.css" />

So I put my PC styles in my standard stylesheet. Then, I fill iOS.css with styles that I want on all iOS devices or only on iPad. Then I fill iPhone.css with styles I want only on iPhone; and, if there are any styles in iOS.css that were for iPad only, I overwrite them in iPhone.css. For this to work, I have to list iOS.css before iPhone.css, as I did above.

Advertisements