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?
Top comments (1)
대각선 길이와 화면 비율을 나란히 보니 같은 인치여도 폭이 달라진다는 점이 잘 드러나네요. 디자인 시스템의 기기 표에는 물리 크기 옆에 브라우저의 CSS 뷰포트와 확대 배율도 별도 칸으로 두면 좋겠어요. 실제 브레이크포인트는 대표 기기 숫자뿐 아니라 제목·버튼·표가 깨지는 구간을 함께 보며 정할 수 있겠습니다.