iphonecssipad

Detect iPhone/iPad purely by css

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?

Solution

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