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:

• -webkit-min-device-pixel-ratio
• min--moz-device-pixel-ratio
• -o-min-device-pixel-ratio
• min-device-pixel-ratio
• min-resolution

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

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:

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).