Detect iPhone/iPad purely by css

Question

Hello,

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

Well, I would recommend checking out lessframework.com.

There's even an option to detect high ppi devices.

Answer 2

You might want to try the solution from this O'Reilly article.

Answer 3

This is how I handle iPhone (and similar) devices [not iPad]:

In my CSS file:

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
   /* CSS overrides for mobile here */
}

In the head of my HTML document:

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

Answer 4

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" />