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

Question

I already read almost all stack questions related to this problem, but nothing works as I expected.

I was asked to find only an iPad device (or at best ~ 1024x768 a mobile device) using a media query. I tried to use

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

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

You can try this script to check the problem.

After searching, I came to this interesting article which says

I think that Safari (and the other WebKit browsers I tested) do not meet the specifications, while Firefox and Opera.

The media width function describes the width of the target display area of ​​the output device. For continuous media, this is the width of the viewport (as described in CSS2, section 9.1.1 [CSS21]), including the size of the scroll bar displayed (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 does not work
but if I use this media query that also determines 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 work correctly , and it seems to fit only safari / iPad.

Q : is this media query reliable enough for my need? Does it always work on iPad / iPad2? Or should I expect some cases of edges and an unexpected coincidence with some other device resolution? In this case, can you offer a more efficient and reliable media query?

Thanks :) (and sorry for the verbosity)

Answer 1

Try also checking the User Agent. This needs to be done in something other than CSS, but it will solve your problem. So you can see if he has an iPad or not.

Such things will definitely break, it’s better to be safe than sorry, and use something that works.

Answer 2

Correct not only the correspondence of the width of the device, but also the height .

It will only work if it fits perfectly.

Take a look at this answer for a more detailed discussion.