The numbers above are your screen size in pixels and your screen resolution, read straight from the browser's Screen and window APIs: logical width and height, available height minus taskbars where reported, color depth, pixel depth, orientation, aspect ratio, 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.
What is my screen size?
It depends which size you mean, and the difference is why this question has two answers. In pixels, it is the width and height reported above — that is what a website, a game or a CSS breakpoint cares about. In inches, no web page can tell you: the browser is never given the physical dimensions of your panel, only its pixel grid, so any site claiming to measure your screen in inches is inferring it from the model or asking you. For the diagonal measurement, check the monitor's model number or the label on its back. A useful consequence: two displays can report identical pixel dimensions at wildly different physical sizes, which is exactly what pixel density describes.
What is my screen's aspect ratio?
Divide the reported width by the height and reduce it. 1920×1080 and 2560×1440 are both 16:9, the standard for most monitors and laptops. 3440×1440 is 21:9 ultrawide, 2560×1600 is 16:10 (common on MacBooks and increasingly on productivity panels), and phones in portrait are usually near 20:9. The ratio matters more than the raw numbers when you are choosing a wallpaper, framing video, or testing a layout — a design that holds at 16:9 can break badly at 21:9 even though both are “widescreen”.
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