Screen Resolution Test
Screen size in CSS pixels, device pixel ratio, viewport and aspect ratio. Device pixels are the CSS screen size times that ratio. They are not always the panel, and browser zoom changes the ratio. The 1-pixel pattern shows resampling; it does not read the panel.
Your screen right now
Device pixels
–
Reading your screen…
- –
- –
- –
- –
- –
- –
- –
Browsers never expose the panel resolution, so this device-pixel figure is CSS pixels multiplied by devicePixelRatio. Set browser zoom to 100% (Ctrl/Cmd + 0) first, because zoom changes the ratio. If the OS is not using the panel's own resolution, this shows that setting, not the panel.
How to read your screen resolution
CSS pixels vs device pixels
Web pages are laid out in CSS pixels, a unit the operating system scales so text stays readable on sharp screens. The device pixel ratio says how many device pixels sit along one CSS pixel. A 4K panel at Windows 150% scaling reports 2560 × 1440 with a ratio of 1.5, which multiplies back to 3840 × 2160. At 125% the same panel reports 3072 × 1728. A MacBook Pro 14" on its default "looks like" setting reports 1512 × 982 at 2×, which matches that panel's 3024 × 1964. Pick a different "looks like" mode and macOS renders at a new size and resamples it, so the reported numbers change even though the panel did not.
Why device pixels are not the panel
No browser API returns the panel resolution. The large number is screen CSS pixels times devicePixelRatio. If Windows is set to 1920 × 1080 on a 4K monitor, the browser only sees 1080p, and the GPU or monitor quietly stretches it. Browser zoom also changes the pixel ratio in most browsers. A label such as 4K UHD only names that device-pixel count. Treat a non-standard result (say 3839 × 2159) as rounding from fractional scaling, and a named count as what the OS is sending, not proof of the hardware.
Catching a fake or mis-set 4K screen
The 1-pixel pattern draws alternating black and white lines one device pixel wide. On a display running at its native resolution with no scaling, each line lands on exactly one row or column of the panel, so from a metre away it looks like flat, even grey. Visible bands, wavy moiré, flicker or a soft blur mean something between the browser and the glass is resampling. Check the OS resolution first, then the monitor's own menu (overscan or "aspect" modes on TVs are common culprits). If the OS says native, scaling is 100%, and the pattern still smears, the "4K" label on the box may be a 1080p or 1440p panel accepting a 4K signal and downscaling it. Try all three patterns: some panels pass vertical lines and fail horizontal ones. A flat grey result still does not name the panel. It only shows that this image is not being resampled.
Related tools
Resolution looks right? Hunt for stuck or dead subpixels with the dead pixel test, check uniformity and backlight bleed with solid color screens, or see whether your mouse matches its advertised DPI with the mouse DPI test. To check that the panel runs at its advertised Hz, use the refresh rate test, and to see if it counts as Retina at your viewing distance, try the Retina display calculator.
Frequently asked questions
What is the difference between CSS pixels and device pixels?
CSS pixels are the units screen.width and screen.height use. The operating system scales them so text stays a similar size on sharp panels. Device pixels on this page are those CSS pixels multiplied by devicePixelRatio. On a MacBook at the default 2× setting, that product matches the panel. It stops matching when the OS resamples (a 1080p mode on a 4K panel, or a non-default looks-like mode) or when browser zoom is not 100%.
Why does the number change when I zoom the browser?
Browser zoom changes devicePixelRatio in most browsers, and this page multiplies the screen CSS size by that ratio. Zoom in and the device-pixel count goes up even though the panel did not change. Set zoom back to 100% with Ctrl or Cmd + 0 before you compare the count with the monitor menu. The viewport, window.innerWidth and window.innerHeight, also changes, because zoom changes how much of the page fits.
Does a 4K or Retina label here mean the panel is 4K or Retina?
No. A name such as 4K UHD only means the device-pixel count is close to 3840 × 2160. A 1080p screen at 200% zoom can land on the same count. Retina and HiDPI are names for a high devicePixelRatio, often 2× or 3× on phones and Macs, at the default scaling. A 2× ratio on a MacBook is the normal setting, not 200% zoom. This page cannot tell those cases apart.
What is screen resolution versus the viewport?
Screen resolution here is screen.width × screen.height: the whole screen in CSS pixels, including area behind the browser chrome. The viewport is window.innerWidth × window.innerHeight: only the visible page inside the window. Available screen is the CSS size minus the taskbar, dock or menu bar.
What can this test not know?
No browser API returns the panel resolution, the physical diagonal, or pixels per inch. A scaled OS mode, a TV doing overscan, or a monitor that accepts a 4K signal and downscales it can all disagree with the panel. This page does not invent a diagonal. Colour depth is whatever the browser reports, and 32-bit usually is not 10-bit colour.
How should I read the 1-pixel pattern?
It draws black and white lines one device pixel wide. From about a metre away, a display that is not resampling looks like flat grey. Bands, moiré, flicker or blur mean something is scaling the image. That is a visual hint, not a measurement of the panel. Check the OS resolution and the monitor menu as well. Some panels pass vertical lines and fail horizontal ones, so try all three patterns.
Why do I see a dash when the page first loads?
The screen, window and devicePixelRatio are read after the page mounts, not during server render. Until that reading exists, every figure is a dash rather than 0. Resize the window or rotate the device and the figures update. The listeners are removed when you leave the page.
Everything here runs in your browser. Nothing about your screen is sent anywhere.