Use viewport for layout
Responsive CSS responds to browser viewport size, not only the physical display resolution or diagonal size.
Compare
Compare devices and displays by CSS viewport, physical resolution, DPR, PPI, and relative visual shape. Start with the general comparison tool or open a common monitor, TV, phone, or laptop comparison.
Comparison coverage
23
comparison pages
9
comparison types
Comparison library
Open a focused comparison page or use the main comparison tool to choose any two records from the device database.
Compare a 24-inch 1080p monitor with a 27-inch QHD monitor for desktop responsive testing and workspace planning.
Compare → Monitor comparisonCompare 27-inch QHD and 32-inch 4K monitor references for desktop UI, dashboard, and design workflows.
Compare → Monitor comparisonCompare a common 24-inch 1080p monitor with a larger 32-inch 4K monitor for desk space, UI scale, and desktop testing.
Compare →Compare 65-inch and 75-inch 4K TV references for presentations, dashboards, media previews, and display planning.
Compare → TV comparisonCompare 55-inch and 65-inch 4K TV references for room planning, presentations, dashboards, and viewing distance.
Compare → TV comparisonCompare 55-inch and 75-inch 4K TVs for large-room viewing, presentations, and display planning.
Compare →Compare large iPhone and Android flagship viewport references for mobile layout testing.
Compare → iPhone comparisonCompare iPhone 16 and iPhone 16 Pro viewport and resolution references for responsive testing and mobile design QA.
Compare → iPhone comparisonCompare iPhone 16 Pro and iPhone 16 Pro Max viewport sizes, physical resolution, and display shape for mobile testing.
Compare → iPhone comparisonCompare iPhone 15 and iPhone 15 Plus viewport references for mobile layouts, screenshots, and responsive QA.
Compare → Small phone comparisonCompare iPhone SE and iPhone 16 references to see how small-screen layouts differ from modern full-screen iPhone layouts.
Compare → Android comparisonCompare Google Pixel 9 and Pixel 9 Pro XL viewport references for Android Chrome responsive testing.
Compare → Android comparisonCompare Samsung Galaxy S24 and S24 Ultra viewport references for Android responsive design and QA testing.
Compare →Compare MacBook Pro 14-inch and 16-inch display references for laptop QA and desktop layout planning.
Compare → Laptop comparisonCompare MacBook Air 13-inch and 15-inch display references for laptop layouts, browser viewport planning, and responsive QA.
Compare → Laptop comparisonCompare MacBook Air 15-inch and MacBook Pro 16-inch display references for laptop workspace and design QA.
Compare →Compare a 27-inch QHD monitor with a 49-inch ultrawide monitor for dashboards, timelines, coding, and multitasking.
Compare → Desktop workspace comparisonCompare a 32-inch 4K monitor and a 49-inch ultrawide monitor for workspace shape, screen area, and responsive layout testing.
Compare →Compare iPad Air 11-inch and 13-inch viewport references for tablet layouts, web apps, and responsive dashboards.
Compare → iPad comparisonCompare iPad mini 6 and iPad 10th gen viewport references for compact and standard tablet layouts.
Compare →Responsive CSS responds to browser viewport size, not only the physical display resolution or diagonal size.
Physical resolution is useful for screenshots, media planning, display sharpness, and QA context.
DPR explains why a high-resolution phone can have a smaller CSS viewport than a lower-density desktop monitor.