Targeting an iPad using a specific stylesheet

My customers' website works fine in all major web browsers. Except for the iPad. Some things render a little bit differently.

I'm using the following conditional stylesheet

<link href="{$SkinDir}/ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 600px) and (max-width: 1024px)" >

It now fixes the iPads' stylesheet problem that I had....

BUT

The site worked fine on other devices such as my HTC Phone. But now that the iPad stylesheet has been loaded, it is now reverting to that stylesheet.

I tried using :

  <link href="{$SkinDir}/phones.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 600px)" >

But it hasnt seem to have cascaded to the phone handset at all, It is still referring to the ipad stylesheet.

Is there any way at all, I can just target the iPad!?

It is worth noting that the site is runn开发者_开发问答ing on a SMARTY Templating engine. The file that relates to the conditional stuff can be found here

Many Thanks in advance.

Do the conditional css < link > on the server level (php), rather than the client level.

you can use this http://shaunmackey.com/articles/mobile/php-auto-bowser-detection/ to detect the iPad and set a flag so you know which css to include.