A screen size comparison for responsive design
The screen size map compares viewport sizes in device‑independent pixel to plan responsive and fluid layouts for great UX / UI designs in digital products.
customize map
Popularity
Size categories
Reset
Screen size
Name
Category
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.
Extra-Extra-Large ·
min 1441 dp
Extra-Large ·
1025 - 1440 dp
Large ·
801- 1024 dp
Medium ·
601 - 800 dp
Small ·
415 - 600 dp
Extra-Small ·
max 414 dp
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.
High · more than 5% of worldwide popularity
Medium · 2-5% of worldwide popularity
Low · under 2% of worldwide popularity
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.
EXAMPLE
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).
Good to know
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 😉