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.

DeviceWidthHeightWidth x Height
Desktop10247681024 x 768
Desktop168010501680 x 1050
Desktop 1080192010801920 x 1080
Desktop Cinema256014402560 x 1440
Desktop 4K384021603840 x 2160
iPhone 5640 (320)1136 (568)640 (320) x 1136 (568)
iPhone 4640 (320)960 (480)640 (320) x 960 (480)
iPhone 3320480320 x 480
iPad7681024768 x 1024
Android sdpi320426320 x 426
Android mdpi320470320 x 470
Android ldpi480640480 x 640
Android xldpi720960720 x 960
Samsung Galaxy S3/4360640360 x 640
Samsung Galaxy Note8001280 800 x 1280
HTC, LG Optimus, Nexus S320533320 x 533
HTC480800480 x 800
HTC540960540 x 960
LG Optimus Pad7681280768 x 1280
MS Surface7681366768 x 1366
Droid360599360 x 599
Nexus 4384598384 x 598
Nexus 7603966603 x 966

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