Search code examples
cssbrowsermedia-queriesretina-displayscreen-resolution

How do web browsers deal with compressed resolution?


I am looking into buying a Macbook 13" with Retina Display. The Apple website brags:

Retina display: 13.3-inch (diagonal) LED-backlit display with IPS technology; 2560-by-1600 resolution at 227 pixels per inch with support for millions of colors

Scaled resolutions: 1680 by 1050, 1440 by 900, and 1024 by 640 pixels

I am curious whether browsers use the scaled resolution (1680 x 1050) or the compressed resolution (2560 x 1600) to handle media queries. For example,

@media (max-width: 1200px) {
    .container {
        width: 900px;
    }
}

On a 13" Macbook Pro with Retina Display (2560px-wide resolution), if the browser uses compressed resolution, then it would have to resize to less than half the screen size for the above change to take effect. (1200px / 2560px ~ 1/2 screen size) But if it uses scaled resolution, then the effect will take place much sooner. (1200px / 1680px ~ 3/4 screen size)

So I am curious to know whether browsers use the scaled resolution or the compressed resolution when considering min-width/height, max-width/height in media queries. My best guess is that they use scaled resolution but I want to be sure.


Solution

  • Web browsers use the scaled resolution, at least on the 15" Retina MBP I've tested on.