Screen Resolution & Aspect Ratio Cheatsheet - Device Resolution Reference
Designing responsively means designing for a range of viewports, not just your own monitor. Grouped by phone, tablet, laptop, monitor and TV, each device lists its physical and CSS pixels where relevant and its aspect ratio. Use it to choose breakpoints, produce video at the right ratio, and talk to stakeholders about "which screens it must work on". After reading you can justify breakpoint decisions against real devices.
Phone Resolutions 10
320 × 480640 × 960750 × 13341080 × 19201125 × 24361170 × 25321290 × 2796720 × 12801080 × 19201440 × 2560Tablet Resolutions 5
768 × 10241536 × 20481668 × 23882048 × 27321600 × 2560Laptop Resolutions 6
1366 × 7681440 × 9001920 × 10802560 × 16003024 × 19643456 × 2234Monitor Resolutions 6
1280 × 7201920 × 10802560 × 14403840 × 21605120 × 28807680 × 4320TV Resolutions 4
1280 × 7201920 × 10803840 × 21607680 × 4320Common Aspect Ratios 7
1:14:316:916:1021:99:161:1.91Tips
- Retina physical resolution is 2x or 3x the logical resolution; CSS uses logical resolution.
- Common responsive breakpoints: 320px (phone), 768px (tablet), 1024px (small laptop), 1280px (desktop).
- 16:9 is the standard video aspect ratio; social media may need 1:1 or 9:16.
- Use the viewport meta tag and media queries to adapt to devices.
- Designs are usually exported at 2x or 3x; divide by the scale to get CSS sizes.
FAQ
What are common phone screen resolutions?
Phones commonly use 1080×1920 (FHD), 1440×2560 (QHD) or 2340×1080; tablets like 2048×1536 (iPad) or 2560×1600; laptops 1920×1080 or 2560×1440; monitors from 1920×1080 up to 4K 3840×2160; TVs mostly 3840×2160. This page groups physical resolutions and aspect ratios by phone, tablet, laptop, monitor and TV, and distinguishes physical from CSS pixels.
What is the difference between physical and CSS pixels?
Physical pixels are the real dots on the screen; CSS pixels are the logical units browsers lay out with, linked by the device pixel ratio (DPR). Design in CSS pixels and let DPR handle hi-dpi screens, so elements don’t look tiny on high-DPR devices.
How do I choose breakpoints for responsive design?
Pick representative breakpoints from real viewports — e.g. phone ≤480, tablet ≤1024, laptop/desktop >1024 — not just your own laptop. For video, use 16:9 for landscape and 9:16 for vertical short-form.
When should I use 16:9 vs 9:16?
Use 16:9 for landscape content (films, meeting recordings, desktop demos) and 9:16 for vertical short-form video watched full-screen on phones. Picking the wrong ratio leaves black bars. This page lists common aspect ratios per device to match against.
Official References
Each command links to its official documentation below, so you can verify the latest usage and read deeper.
Maintained by LaoHand
Publicly updated on Jul 21, 2026, continuously proofread against official docs.
Contact Us
Wrong command or description? Send us corrections, business inquiries or product feedback by email.
Contact Us