6

I've already read almost all stackoverflow questions related to this issue, but nothing works as I expected.

It was asked to me to detect only the iPad device (or at best ~1024x768 mobile device) with a media query. I tried to use

@media screen
       and (min-device-width: 768px)
       and (max-device-width: 1024px) {
   ...
}

but this media query matches also Chrome (and Safari, I guess) on laptops and desktop Win32/MacOS when the resolution is set to 1024x768 (but not firefox). I tried this media query defining orientation:portrait and orientation:landscape but with no luck. It's also recognized on desktop webkit-browser.

You can try this fiddle to test the issue.

After searching I came to this interesting article in which is stated

I think Safari (and the other WebKit browsers I have tested in) are not following the spec, while Firefox and Opera are.

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any).

so I tried this (fiddle) with 1009px as max-device-width (1024-15)

@media screen and (min-device-width: 768px) 
              and (max-device-width: 1009px) {
   ...
}

and doesn't work
but if I use this media query also defining the orientation (fiddle)

@media screen and (device-width:768px) and (orientation:portrait),
       screen and (device-width:1009px) and (orientation:landscape) {
    ...
}

surprisingly (to me) it seems to properly work and it seems to match only safari/iPad.

Q: is this media query enough reliable for my need? Does it always work in iPad/iPad2? Or I have to expect some edge cases and unexpected match with some other device resolution? In a such case can you suggest a more efficient and reliable media query?

Thank you :) (and sorry for the verbosity)

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • Whats the exact purpose? E.g. there will be an iPad 3 next month or so, with a different screen resolution. And yes - I'd expect other tablets to match too. – Lennart Feb 10 '12 at 09:36
  • 1
    The exact purpose is primarily match ipad/ipad2. I know that this has no much sense in terms of RWD (what's the difference between a mobile and a desktop 1024x768? They should be considered the same thing IMHO) but since asked me to do such thing in pure css,I'd like to achieve this - if it's possible of course. – Fabrizio Calderan Feb 10 '12 at 09:50
  • Are you trying to make a site friendly for iPad? If that's the case, you would be better of making the site 'touch' friendly for all devices and in that case you can use libraries such as modernizr to sniff if the device supports touch events (so you can switch which css file is rendered in javascript) – Stephen Feb 13 '12 at 15:55

2 Answers2

4

Try checking the User Agent as well. This will have to be done in something else than CSS, but will solve your problem. This way you can see if its an iPad or not.

Things like this are bound to break, better to be safe than sorry and use something that works.

Dennis Korff
  • 41
  • 2
1

The fix is to not only match device width but height as well.

It will only work if matched perfectly.

Take a look at this answer for a more in depth discussion.

Community
  • 1
  • 1
Nick Dumais
  • 128
  • 1
  • 1
  • 5