Screen Resolution vs Viewport vs Pixel Ratio
'My screen is 1920×1080' is both true and useless to a web developer. The resolution your browser reports, the resolution your app renders at, and the resolution the physical display runs at are three different numbers. Here's why that matters — and how to work with all three.
Three Different Resolutions
When people say "screen resolution," they usually mean one of three different things:
1. Physical resolution
The actual pixels on the hardware. A "4K display" has 3840×2160 physical pixels regardless of how you use it. This number is fixed by the hardware.
2. Logical (CSS) resolution
What your operating system and browser treat as the "screen size." On a Retina MacBook, the physical resolution might be 2880×1800, but the logical resolution is 1440×900. This is the number CSS uses. When you write width: 100vw, you get logical pixels.
3. Viewport resolution
The usable area inside the browser window. Smaller than the logical resolution because browser chrome (tabs, address bar) takes space. This is what your web layout actually renders into.
Device Pixel Ratio (DPR) Ties Them Together
DPR is the ratio of physical pixels to CSS pixels:
- DPR 1 — standard display. 1 CSS pixel = 1 physical pixel.
- DPR 2 — HiDPI / Retina. Each CSS pixel is 2×2 physical pixels (4 total).
- DPR 3 — ultra-HiDPI, common on flagship phones. 9 physical pixels per CSS pixel.
A 1200px-wide image looks pixelated on a DPR 2 display because it's actually rendering across 2400 physical pixels. To get crisp images on HiDPI, you need to provide a 2400-wide version (the "@2x" image) that displays at 1200 CSS pixels.
Why This Matters for Web Development
Images
Use srcset or the <picture> element to serve appropriate resolutions. A phone with DPR 3 needs a 3x image to look sharp. A standard monitor doesn't — serving a 3x image to it wastes bandwidth.
Media queries
Media queries use CSS pixels, not physical pixels. @media (min-width: 1200px) triggers at 1200 logical pixels. A high-DPI phone might have physical width of 1290 but logical width of 430 — it will match mobile breakpoints, not desktop ones.
SVGs vs raster images
SVGs scale perfectly to any DPR. Raster images (PNG, JPG) need explicit handling. Default to SVG whenever the image is a logo, icon, or geometric shape.
Canvas and WebGL
Drawing to a canvas at logical resolution gives you a blurry output on HiDPI displays. You need to scale the canvas dimensions by DPR and draw at physical resolution, then CSS-size it back down.
Responsive Breakpoints
The common breakpoint ranges (based on logical pixels):
- Mobile: 0-639px — phones in portrait
- Tablet: 640-767px — large phones, small tablets
- Laptop: 768-1023px — tablets, small laptops
- Desktop: 1024-1279px — most laptops
- Large: 1280-1535px — external monitors
- Extra Large: 1536+ — 4K displays, ultrawide monitors
The Screen Resolution Checker shows which breakpoint your current viewport matches. Resize your browser to see them shift.
Gotchas to Know
The address bar collapses on scroll
On mobile, the address bar hides when the user scrolls down. This increases the viewport height mid-session. Code that relies on window.innerHeight needs to handle this — a layout that fits perfectly at page load may overflow after scroll.
Browser zoom changes viewport
When a user zooms in (Ctrl/Cmd +), the browser reports a smaller viewport. A site that looked desktop-sized at 100% zoom can hit mobile breakpoints at 150% zoom. Test your breakpoints at different zoom levels.
Orientation changes
On mobile, rotating from portrait to landscape fires orientationchange. Height and width swap. Media queries re-evaluate. Make sure your layout handles both orientations.
Common Screen Sizes by Device
- iPhone 15 / 14 / 13: 390×844 CSS / DPR 3
- iPhone 15 Pro Max: 430×932 CSS / DPR 3
- iPad Pro 12.9": 1024×1366 CSS / DPR 2
- MacBook Air 13": 1280×832 CSS / DPR 2
- 4K monitor: 3840×2160 CSS / DPR 1 (unless scaled)
- Typical Windows laptop: 1920×1080 CSS / DPR 1
Use these as targets when testing responsive designs.
Try the tool
See your screen size, viewport, DPR, aspect ratio — live.
Frequently Asked Questions
Why is my viewport smaller than my screen?
What's the difference between DPR 1 and DPR 2?
How do I detect screen orientation changes?
Does zoom affect my layout?
Published April 2026 by Derek Giordano