A reliable media query to detect only iPad (or at best 1024x768 mobile devices)

Question

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)

Answer 1

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.