Detect iPhone / iPad exclusively css

Question

I tried to find the iPhone or iPad solely by style. I tried the solution provided here using a @media handheld, just a screen and (max-device-width: 480px) {.

However, this does not seem to work. Any ideas?

Answer 1

Here's 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 */ } 

At the beginning of my HTML document:

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

Answer 2

iPhone and iPod touch:

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

iPhone 4 and 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" /> 

Answer 3

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

The important part is these CSS formatted queries:

 <link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css"> 

Answer 4

I use the following:

 /* Non-Retina */ @media screen and (-webkit-max-device-pixel-ratio: 1) { } /* Retina */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { } /* iPhone Portrait */ @media screen and (max-device-width: 480px) and (orientation:portrait) { } /* iPhone Landscape */ @media screen and (max-device-width: 480px) and (orientation:landscape) { } /* iPad Portrait */ @media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { } /* iPad Landscape */ @media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { } 

http://zsprawl.com/iOS/2012/03/css-for-iphone-ipad-and-retina-displays/

Answer 5

Many devices with different screen sizes / ratios / resolutions have even come out over the past five years, including the new types of iPhones and iPads. It would be very difficult to set up a website for each device.

Meanwhile, media queries for device-width , device-height and device-aspect-ratio are outdated, so they may not work in future versions of the browser. (Source: MDN )

TL; DR: design based on browser width, not on devices. Here is a good introduction to this topic .