Screen Resolution

Screen Resolution

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?!”

Leave a Reply