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 × 480iPhone 3GS (3:2)
640 × 960iPhone 4/4S (3:2 @2x)
750 × 1334iPhone 6/7/8 (16:9 @2x)
1080 × 1920iPhone 6/7/8 Plus (16:9 @3x)
1125 × 2436iPhone X/XS (19.5:9 @3x)
1170 × 2532iPhone 12/13/14 (19.5:9 @3x)
1290 × 2796iPhone 14 Pro Max (19.5:9 @3x)
720 × 1280Android 720p (16:9)
1080 × 1920Android 1080p (16:9)
1440 × 2560Android 1440p (16:9)
Tablet Resolutions 5
768 × 1024iPad mini / iPad (4:3)
1536 × 2048iPad Retina (4:3 @2x)
1668 × 2388iPad Pro 11" (4:3 @2x)
2048 × 2732iPad Pro 12.9" (4:3 @2x)
1600 × 2560Android 平板 (16:10)
Laptop Resolutions 6
1366 × 76813" 笔记本 (16:9)
1440 × 900MacBook Air 11" (16:10)
1920 × 1080Full HD 笔记本 (16:9)
2560 × 1600MacBook Pro 13" Retina (16:10 @2x)
3024 × 1964MacBook Pro 14" (16:10 @2x)
3456 × 2234MacBook Pro 16" (16:10 @2x)
Monitor Resolutions 6
1280 × 720HD 720p (16:9)
1920 × 1080Full HD 1080p (16:9)
2560 × 1440QHD 1440p (16:9)
3840 × 21604K UHD 2160p (16:9)
5120 × 28805K (16:9)
7680 × 43208K UHD 4320p (16:9)
TV Resolutions 4
1280 × 720720p HD (16:9)
1920 × 10801080p Full HD (16:9)
3840 × 21604K UHD (16:9)
7680 × 43208K UHD (16:9)
Common Aspect Ratios 7
1:1正方形（Instagram 帖子）
4:3传统电视、iPad
16:9宽屏电视、YouTube 视频
16:10MacBook、部分Display器
21:9超宽屏Display器、电影
9:16竖屏视频（TikTok、Reels）
1:1.91Facebook 链接预览
Tips
- 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.
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