Media queries for iPad vs iPad Air

Question

There are 2 Good discussions about @media queries on StackOverflow already. One of them is here: CSS media queries work for iPad2, iPad Air, Samsung Galaxy, large screens but not the usual desktop screens.

Those discussions took place before the advent of the iPad Air. The iPad Air has a viewport of 2048 x 1536. I cannot find the webkit-min-device-pixel-ratio for it. I want to target the Air specifically because my AJAX site shrinks to half the size on it. This site is meant for landscape only.

So...

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
(-webkit-min-device-pixel-ratio: 1.0)

-> targets the old iPad 2's

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
(-webkit-min-device-pixel-ratio: 2.0)

-> targets the iPad 3 & 4 retinas but it does not target the Air

I have tried variations of

@media only screen 
and (min-device-width : 1536px) 
and (max-device-width : 2048px) 
and (-webkit-min-device-pixel-ratio: 2.0)

to try and get the Air to react. Who out there has had experience developing for the new Airs?

Answer 1

you need viewport sizes http://viewportsizes.com/?filter=ipad Air has viewport 1024x768 too

Answer 2

I had problems with developing for the new ipad air 3. i barely found exakt information about viewport size for media-query. A friend told me that it has same size like ipad pro (10.5 inch) so i went to following apple developer site: https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html

There it was important to take the UIKit Size from Table 2-1. After all my query for targetting exactly the ipad air 3 (in landscape mode) looked like this: @media all and (device-width: 834px) and (device-height: 1112px) and (orientation:landscape) {}