Facebook Twitter Pinterest

Think Mobile

Screen Pixels and Breakpoints

When setting breakpoints for a responsive design, it is helpful to know what some common device sizes are. Here is a list of some common screen pixel sizes.

Some devices, like the iPhone with Retina screen, iPad Air, and Samsung Galaxy S4, report smaller screen sizes than their actual number of pixels. For example, the iPad Air reports a screen size of 768x1024, like other iPads, even though its actual pixel count is 1536x2048. The Galaxy S4 reports 1/3 its actual pixel count. This has the benefit that it allows web sites to display properly even if CSS might otherwise report a very large screen size.

Also, the whole iPad series has the anomaly that they always report the screen width as 768 pixels, even if the device is rotated to landscape mode. The change can be detected by checking the “orientation” in CSS media queries. The iPad can be detected pretty reliably by checking a combination of the device width, device height, and orientation, because it is the only device that reports width less than height even in landscape orientation. Note that it is important to check the device dimensions rather than the window dimensions.

There are media queries that let you check the pixel ratio and also the resolution:

Numbers in (parentheses) show the reported device size when different from the actual device size.

Desktop 108019201080
Desktop Cinema25601440
Desktop 4K38402160
iPhone 5640 (320)1136 (568)
iPhone 4640 (320)960 (480)
iPhone 3320480
Android sdpi320426
Android mdpi320470
Android ldpi480640
Android xldpi720960
Samsung Galaxy S3/4360640
Samsung Galaxy Note8001280
HTC, LG Optimus, Nexus S320533
LG Optimus Pad7681280
MS Surface7681366
Nexus 4384598
Nexus 7603966

I have not listed some devices that have the same screen sizes as other devices already in the list. Some odd screen dimensions like 533 are probably 1600 actual pixels with a device pixel ratio of 3/1

Note that all the devices except those denoted “Desktop” can be turned sideways so that the height becomes the width. This gives us many more screen widths to deal with. Fortunately, most of the available screen widths fit into a few small ranges. These are:

320 533-540 800-801
360 598-603 960
426-427 640-648 1024
470-480 768 1280

Where there is a small range of pixel sizes, which number you choose probably depends on whether your media queries use min-width (mobile first) or max-width (desktop first).