Detect iPhone/iPad purely by css

Question

I've been trying to detect an iPhone or iPad purely by stylesheet. I tried the solution provided here by using @media handheld, only screen and (max-device-width: 480px) {.

However, this doesnt seem to work. Any ideas?

Answer 1

iPhone & iPod touch:

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

iPhone 4 & iPod touch 4G:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

iPad:

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