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.
Web browsers use the scaled resolution, at least on the 15" Retina MBP I've tested on.