49

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?

Improve this question
1

5 Answers 5

Reset to default
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" />
Improve this answer
2
  • 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
    Commented Nov 9, 2011 at 9:32
  • 8
    Never detect specific devices. New devices come out every month and these numbers change.
    – fregante
    Commented Nov 17, 2012 at 2: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">
Improve this answer
6
  • 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
    Commented Nov 30, 2011 at 11:59
  • 14
    Don't use this, never set user-scalable=no
    – fregante
    Commented Nov 17, 2012 at 2:09
  • 1
    I have to agree with bfred.it here. user-scaleable=no is not a good practice.
    – Bart
    Commented Jan 15, 2013 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
    Commented Nov 1, 2013 at 8: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
    Commented Jan 21, 2014 at 5:05
21

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/

Improve this answer
3
  • Added " and (max-device-width: 1024px)" condition for iPad.
    – Dmitry
    Commented Jan 8, 2017 at 7:05
  • 1
    What happens if you have an Android device that has a width of 460px?
    – driconmax
    Commented Nov 7, 2017 at 13:10
  • it helped me identify iPad for ionic angularjs app
    – danish ali
    Commented Sep 8, 2023 at 11:58
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">
Improve this answer
2
  • 1
    Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.
    – Bill the Lizard
    Commented Jul 6, 2011 at 15:35
  • 1
    @Bill the Lizard: Thanks for pointing that out, have updated the answer.
    – DarkDust
    Commented Jul 6, 2011 at 16:58
4

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.

Improve this answer
2
  • 8
    Device-specific queries are required to workaround device-specific bugs.
    – Finesse
    Commented Apr 22, 2017 at 2:34
  • 2
    I want to use specific graphics (Mail.app icon) if the page is being displayed on an iPhone.
    – BrianHenryIE
    Commented Oct 6, 2021 at 17:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.