Screen Resolution & Aspect Ratio Cheatsheet - Device Resolution Reference
Responsive work rarely fails because you lacked a breakpoint; it fails because the breakpoint sits on a device nobody owns. This table groups viewports into phone, tablet, laptop, monitor, and TV, listing common physical resolutions, logical CSS resolutions, and aspect ratios for real shipping hardware, plus a separate ratio reference for the portrait and landscape cases that actually come up. Its judgment rule is not to copy someone else media queries but to first fix the narrowest and widest screens the deliverable must survive, then pick real machines from this table on both sides to test against. Reach for it when setting design safe areas, choosing between 16:9 and 9:16 for video, reproducing a report that something looks wrong on a specific laptop, or arguing with a product owner about the minimum device list. One layer is constantly missed: Retina 2x and 3x screens measure physical pixels in screenshots but consume CSS logical pixels in layout, and mixing the two halves or doubles every size you set.
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