A screen size comparison for responsive design
Screen size groups
The screen width is more relevant than screen height for UI and responsive design. So we clustered screens by width in six groups and applied different colors to enable a good screen size comparison. The groups provided here are not necessarily breakpoints in a CSS layout.
Most common screen sizes
Popularity data used in the map paints a picture of worldwide screen usage. To make this feature possible, we had to gather browser and device statistics from different web resources and merge those to meet our needs and the device-independent pixel, a unit of measurement in digital displays.
We grouped popularity data in three categories.
What are device‐independent pixels?
Displays come in various resolutions, such as Retina, HD or 4K. This map uses a unit called device-independent-pixel (dp or dip).
Those units are not considering the resolution of a screen as inch or cm would do. Instead, DPs determine size values in a layout - no matter in which pixel density they will be rendered on a specific device. Developers and designers use DPs when creating digital products that have to work on devices with different resolutions.
Let's say a button in a layout has 300 dp width.
On a laptop with a low resolution screen it would render in 300 pixel. 1 dp is 1 px on the device (1:1 device pixel ratio). On an iPhone with a Retina display, the same button would have the same size of 300 dp, but would actually render in 600 pixel width, because 1 dp is 4 px on the HD display (1:2 device pixel ratio).
More responsive design and UX
Receive the poster
You can receive the screen size map as a A2 poster via email. Print it out and put it on your wall. Use it as a handy reference when in doubt with viewport pixel sizes in your daily work.
And: yes, it also comes in black 😉