Responsive websites are great for websites displayed on all sorts of devices, but one thing it doesn’t do all that well is manage your screen resolution.
Two factors influence how a responsive website appears in your browser: pixel dimension and pixel density (in Pixels Per Inch or “PPI”).
Screen Resolutions Vary
Here’s a little table showing the resolution and pixel density for many of the most popular devices.
| Resolution | PPI | Device Example |
|---|---|---|
| 2880×1800 | 226 | 15-inch Apple MacBook Pro with Retina display |
| 2560×1700 | 239 | Google Chromebook Pixel |
| 2048×1536 | 264 | iPad 3, iPad 4 (with Retina), iPad Air |
| 1920×1080 | 208 | MS Surface with Win 8 Pro |
| 1920×1080 | 102 | Apple iMac (2009 – 2011) |
| 1920×1080 | 176 | Dell XPS 12 |
| 1600×900 | 141 | 13-inch Apple Macbook Air |
| 1280×720 | 306 | 4.8-inch Samsung Galaxy S III |
| 1024×768 | 162 | 7.9-inch Apple iPad Mini |
| 1136×640 | 326 | 4-inch Apple iPhone 5 Series |
| 480×320 | 165 | 3.5-inch Apple iPhone 3 Series |
Source: Wikipedia and Spirelight
As you can see there’s a HUGE variation in both screen size, resolution and pixel density. The good news is that we can leave the viewport as the same as the device’s width and even set the initial-scale = 1 (which most HD devices will go ahead and double for you). Load Retina.js and it’ll swap-out the images for their double-sized copies.
Where’s the “Fold”?
If you REALLY care about “the fold” (we don’t), you have to plan on it being the lowest there is–about 700 vertical pixels.
Your layout may hate you for it, but your client may still be on a 800×600 4:3 monitor and keep telling you, “I don’t see it. Where’s the fold?!”