The numbers above come straight from the browser's Screen and window APIs: logical width and height, available height minus taskbars where reported, color depth, pixel depth, orientation, and devicePixelRatio. I once filed a bug on a 3440×1440 ultrawide where marketing screenshots used full panel resolution but the hero component read window.innerWidthafter the devtools dock ate 400px, so QA thought the site "did not support" ultrawide. Below I separate physical pixels from CSS pixels, explain scaling and zoom, and show how to read the same values from the OS when the browser lies by policy.
Physical pixels, CSS pixels, and devicePixelRatio
Device pixels are the hardware dots on your panel. CSS pixels are the coordinate system layout uses; one CSS pixel can cover one, two, or three device pixels depending on window.devicePixelRatio(DPR). High-DPI phones often ship DPR 2 or 3 so text stays readable without shrinking the layout grid. A "CSS width" of 390 on an iPhone does not mean a 390-device-pixel-wide screen.
Viewport is the visible layout area inside the browser chrome. It changes when you zoom, split the window, or open the keyboard on mobile. screen.width is closer to the display's reported mode; window.innerWidth tracks the layout viewport the page actually paints into.
How this page detects screen properties
Client code reads screen.width, screen.height, screen.availWidth, screen.availHeight, screen.colorDepth, window.devicePixelRatio, and screen.orientation.type where available. Some values are rounded or clamped on privacy-hardened browsers. Remote desktop and virtual machines may report the guest session resolution, not the host monitor behind the glass.
Why the browser number disagrees with the box on the monitor
Operating system scaling at 125%, 150%, or 200% maps logical desktop units to fewer physical pixels for UI legibility. Browser zoom (Ctrl/Cmd + plus) shrinks the CSS viewport without changing the monitor hardware. Non-native panel modes (running 1080p on a 4K panel) report the active mode, not the panel maximum. External docks sometimes advertise the wrong EDID until firmware updates.
Common display modes people still ship in 2026
| Name | Typical resolution | Aspect | Typical use |
|---|---|---|---|
| 1080p (FHD) | 1920 × 1080 | 16:9 | Budget laptops, second monitors |
| 1440p (QHD) | 2560 × 1440 | 16:9 | Productivity default on many desks |
| 4K UHD | 3840 × 2160 | 16:9 | Creative work, sharp text at native scaling |
| 5K (iMac class) | 5120 × 2880 | 16:9 | Photo/video editing pipelines |
| 8K UHD | 7680 × 4320 | 16:9 | High-end grading, signage |
| 21:9 ultrawide (1440p tall) | 3440 × 1440 | 21:9 | Timeline UIs, trading desks |
Cross-checking from system settings and the terminal
When the browser looks wrong, confirm what the OS thinks the panel is running.
- Windows: Settings → System → Display → Display resolution.
- macOS: System Settings → Displays → Resolution.
# Linux (X11 / many Wayland sessions)
xrandr --query
# Hyprland
hyprctl monitorsRetina, HDR, and why accessibility beats raw pixel count
Apple popularized Retinaas marketing for "DPR high enough that individual pixels disappear at normal viewing distance." It is not a separate API flag; it is high DPR plus tuned typography. Users enlarge text with browser zoom or OS scaling; breakpoints should use min-width in CSS pixels and respect prefers-reduced-motion rather than assuming a fixed 1920 canvas.
Frequently asked questions
What is the difference between screen size and resolution?
Size is physical diagonal inches of the panel. Resolution is the pixel grid (for example 2560×1440). Two 27-inch monitors can have different resolutions and different DPR under OS scaling.
What does device pixel ratio mean?
It is the ratio of device pixels to CSS pixels. DPR 2 means one CSS pixel maps to a 2×2 device-pixel square. Raster images need higher intrinsic dimensions to stay sharp on high DPR screens.
Why does my browser show a smaller resolution than my monitor?
You are probably reading innerWidth / innerHeight (viewport) or running OS scaling. Full screen width is closer to screen.width multiplied by the relationship between CSS and device pixels, still subject to zoom.
What is a Retina display?
Marketing language for high-DPI panels where text and UI are rendered with enough density that pixels are not obvious at typical viewing distance. Technically it is still LCD or OLED hardware with a higher DPR.
How do I change my screen resolution?
Use the OS display settings above. Pick the monitor's native resolution when possible for sharpest image. Games may override resolution independently of the desktop mode.
Related tools
GPU and WebGL strings: What Is My WebGL / GPU. Browser name and engine: What Is My Browser. Raw user agent: What Is My User Agent.
Sources cited above
- CSSOM View Module: viewport and window dimensions
- MDN: Screen
- Media Queries Level 5: environment variables such as safe-area-inset