A quick way to compare screen sizes and resolutions side by side
When I'm designing for multiple devices, the part that slows me down most is the boring arithmetic: is a 6.1" phone really smaller than a 6.7" one? How much narrower is a 13" laptop than a 15.6" one? How do pixel densities compare once you stop trusting the "inches" number?
I've been using Screen Size Comparison for this. You pick two devices and it shows their physical dimensions, diagonal, and resolution next to each other, so you can eyeball the difference instead of converting units in your head.
A few things that surprised me:
- Diagonal inches hide aspect ratio. A 16:9 and a 3:2 panel with the same diagonal have noticeably different width and height, which matters as soon as you're planning layout breakpoints.
- Bigger diagonal doesn't always mean more pixels. Resolution and PPI are separate numbers; a low-density big screen can look worse than a dense small one.
- Ratios are easier to reason about than absolute sizes. Once you know that two screens are within a few percent of each other in width, the "which is wider" question mostly goes away.
It's free and needs no account. If you keep a device matrix in your design system, it's a handy reference to link next to it.
What's your usual workflow for picking breakpoints across devices?