Why does media query targeting 1024x768 also target iPads with retina display?

Question

I am using the following media query to target iPads:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
    /* style */
}

From the testing I have done, this seems to work with all iPads (retina and non-retina). Why is this the case?

iPads without retina are 1024x768, but iPads with retina are 2048x1536. My media query does not include a 'device-pixel-ratio' property, so why is this targeting iPads with retina displays?

Answer 1

Although the Retina display has a resolution of 2048x1536, its device-pixel ratio of 2 means that the resolution as far as CSS is concerned is still 1024x768 (this is known as "CSS pixels"). The pixels are simply doubled when rendering pages onto the display, independently of how pixels are calculated by the browser for the purposes of CSS.

This is why the device-pixel-ratio/resolution media feature exists to distinguish high-resolution variants of specific devices.