Device Dimensions Reference in CSS
From the Screen Sizes & Responsive Breakpoints cheat sheet · Standard Breakpoints & Device Sizes · verified Jul 2026
Device Dimensions Reference
Actual screen dimensions of popular devices for accurate responsive testing
css
/* Popular Device Viewport Sizes (CSS pixels) */
/* 📱 Mobile Phones */
iPhone SE (2nd/3rd gen) 375x667
iPhone 12/13 mini 375x812
iPhone 12/13/14 390x844
iPhone 15 / 14-15 Pro 393x852
iPhone 12/13 Pro Max 428x926
iPhone 14/15 Pro Max 430x932
Samsung Galaxy S20 360x800
Samsung Galaxy S21 384x854
Google Pixel 5 393x851
/* 📱 Tablets */
iPad Mini 768x1024
iPad Air 820x1180
iPad Pro 11" 834x1194
iPad Pro 12.9" 1024x1366
Surface Pro 7 912x1368
Samsung Galaxy Tab S7 753x1205
/* 💻 Laptops */
MacBook Air 13" 1440x900
MacBook Pro 14" 1512x982
MacBook Pro 16" 1728x1117
Surface Laptop 1504x1003
Dell XPS 13 1920x1080
/* 🖥️ Desktop Monitors */
HD Desktop 1366x768
Full HD 1920x1080
2K/QHD 2560x1440
4K/UHD 3840x2160
5K iMac 5120x2880📱 Test on actual devices when possible, not just browser emulation
💡 Consider logical breakpoints based on content, not just devices
⚡ Use Chrome DevTools device mode for quick responsive testing
🖥️ Don't forget ultra-wide monitors (21:9 aspect ratio)
📌 Account for browser UI that reduces available viewport
✅ Test with both portrait and landscape orientations