I made these charts to help me decide at which resolutions my fluid layouts should link to different stylesheets. I haven’t quite settled on a solution but I think these charts offer a good visual understanding of Apple’s resolution intervals. Things to consider:
- I omitted a few resolutions including the Hi-Res Non-Retina 15″ MacBook Pro (1680×1050), the 11″ MacBook Air (1366×768), and the iPhone 4S (480×320).
- All resolutions are in points, not pixels, as this is what we as web developers are interested in (I just divided the retina resolutions by 2).
- Should new stylesheets target exact resolution intervals, the pixel before, or the pixel after? Is there even any difference between these?
- Which resolutions should be discarded? It gets pretty tight around 15″ (especially if you’d like to account for Hi-Res 15″), which resolution would keep the intervals most uniform?
I understand that Apple computers are a small percentage of the market share but in the end fluid layouts are designed to make the experience pleasant on any screen size.