48

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?

FLX
  • 4,634
  • 14
  • 47
  • 60
  • Related newer question: [CSS media query to target only iOS devices](https://stackoverflow.com/q/30102792/3345375) – jkdev Jul 21 '19 at 06:10

5 Answers5

32

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" />
Olivier Payen
  • 15,198
  • 7
  • 41
  • 70
  • 8
    The iPad detection has a problem: be ready that netbooks that usually have screens 1024x768 and 1024x600 will be affected by this CSS too. – Aldekein Nov 09 '11 at 09:32
  • 8
    [Never detect specific devices](http://stackoverflow.com/a/12990647/288906). New devices come out every month and these numbers change. – fregante Nov 17 '12 at 02:12
28

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">
Bart
  • 6,694
  • 6
  • 43
  • 53
  • Is there non media-query way to do this? Since iPad Safari has this bug-feature where it re-sizes the big background pictures to 50% and this bug-feature does not exist on other small-pixel browsers. So one needs something like IE conditionals for iPad? So I could target only the iPad/iPhone safari? – Ciantic Nov 30 '11 at 11:59
  • 14
    Don't use this, [never set `user-scalable=no`](http://www.456bereastreet.com/archive/201106/the_ios_zoom_setting_disables_maximum-scale1_and_user-scalableno/) – fregante Nov 17 '12 at 02:09
  • 1
    I have to agree with bfred.it here. `user-scaleable=no` is not a good practice. – Bart Jan 15 '13 at 14:38
  • 10
    I disagree on the "never" part for user-scaleable. If you're building a native-like responsive web app, having it user scaleable can only cause problems. If you designed it correctly, there shouldn't ever be a need for a user to wish to zoom in/out. – Vexter Nov 01 '13 at 08:58
  • 1
    @Vexter you are correct, this is a good use case for this attribute. But it is clearly incorrect in the context of the original question and answer. – Jay Jan 21 '14 at 05:05
  • I totally agree with Vexter. It's exactly my current situation. "Never" was just not the right word – wlf Jul 29 '21 at 23:33
19

I use these:

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

Dmitry
  • 14,306
  • 23
  • 105
  • 189
zSprawl
  • 969
  • 7
  • 11
16

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

The important part are these CSS media 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">
DarkDust
  • 90,870
  • 19
  • 190
  • 224
  • 1
    Whilst this may theoretically answer the question, [it would be preferable](http://meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Bill the Lizard Jul 06 '11 at 15:35
  • 1
    @Bill the Lizard: Thanks for pointing that out, have updated the answer. – DarkDust Jul 06 '11 at 16:58
3

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

Meanwhile, media queries for device-width, device-height, and device-aspect-ratio have been deprecated, so they may not work in future browser versions. (Source: MDN)

TLDR: Design based on browser widths, not devices. Here's a good introduction to this topic.

jkdev
  • 11,360
  • 15
  • 54
  • 77