About this tool
This page answers "what is my screen resolution?" using the values your browser exposes to web pages: the screen size, the device pixel ratio, the viewport, the available screen area, color depth and orientation. It also estimates the physical pixel count of your display and simplifies the aspect ratio. The numbers are read in your browser and update live as you resize the window, zoom or rotate your device.
How to use it
- Open the page on the device you want to check. The large number at the top is your screen size in CSS pixels.
- Check the device pixel ratio. If it is anything other than 1, the physical pixel estimate is the figure closest to your display's native resolution.
- Reset browser zoom to 100% (Ctrl+0, or Cmd+0 on a Mac) before reading the numbers, because zoom changes several of them.
- Resize the window to watch the viewport values change, which is useful when testing responsive layouts.
- Copy all as text to paste the full report into a bug report or support ticket.
CSS pixels, physical pixels and devicePixelRatio
Web pages are laid out in CSS pixels, not in the hardware pixels of your panel. The CSSOM View specification says its dimensions, including screen.width and screen.height, are in CSS pixels unless stated otherwise. MDN describes devicePixelRatio as the ratio of the resolution in physical pixels to the resolution in CSS pixels, and notes that 1 corresponds to a classic 96 DPI display while 2 is expected for HiDPI or Retina displays.
That is why this tool multiplies the screen size by the ratio to estimate physical pixels. A Retina laptop display that reports 1440 × 900 with a ratio of 2 works out to 2880 × 1800 device pixels. The result is labelled an estimate because rounding, fractional ratios and some browsers' privacy features can make it a few pixels off, or report generic values.
Why zoom and display scaling change the numbers
Operating systems scale the desktop on high-density screens so text stays readable. On Windows this is the Scale setting. A 1920 × 1080 laptop set to 125% typically reports a screen of 1536 × 864 CSS pixels with a device pixel ratio of 1.25, and 1536 × 1.25 = 1920, 864 × 1.25 = 1080 recovers the native size.
Browser zoom works the same way inside the page. MDN notes that zooming in makes each CSS pixel larger, so devicePixelRatio goes up, while pinch-zoom on a touch screen does not change it. At 200% browser zoom on a 1920-pixel-wide screen, the page sees half as many CSS pixels across. If the numbers here look smaller than you expect, check your zoom level first.
Viewport vs screen
The screen is the whole display. The viewport is the part of the browser window that shows the page. window.innerWidth is the width of the layout viewport including any vertical scrollbar, and MDN recommends document.documentElement.clientWidth when you need the width without the scrollbar. CSS media queries such as @media (min-width: 768px) respond to the viewport, not the screen, so the viewport figures are the ones that matter for responsive design. The available screen area subtracts permanent operating system features such as the Windows taskbar or the macOS Dock and menu bar.
How to find your native resolution in system settings
- Windows 11: open Start, then Settings, System, Display. The Display resolution list marks the panel's native resolution as (Recommended). The Scale setting just below is what changes the CSS pixel numbers you see here.
- macOS: open the Apple menu, then System Settings, Displays. Resolutions are shown as thumbnails or a list, and Default restores the recommended setting. On Retina displays the options are scaled sizes rather than the raw panel resolution.
Mobile phones do not usually expose a resolution setting. Their high pixel ratios mean the CSS screen size is much smaller than the hardware resolution.
Common screen resolutions
These are widely documented display resolutions. The aspect ratio column is the exact reduced ratio, which explains why some panels marketed as 16:9 or 21:9 are not exactly that.
| Resolution | Common name | Exact ratio | Decimal | Total pixels |
|---|---|---|---|---|
| 1024 × 768 | XGA | 4:3 | 1.33:1 | 786,432 |
| 1280 × 720 | HD (720p) | 16:9 | 1.78:1 | 921,600 |
| 1280 × 800 | WXGA | 8:5 | 1.60:1 | 1,024,000 |
| 1366 × 768 | Common laptop panel, often sold as HD | 683:384 | 1.78:1 | 1,049,088 |
| 1440 × 900 | WXGA+ | 8:5 | 1.60:1 | 1,296,000 |
| 1600 × 900 | HD+ | 16:9 | 1.78:1 | 1,440,000 |
| 1920 × 1080 | Full HD (1080p) | 16:9 | 1.78:1 | 2,073,600 |
| 1920 × 1200 | WUXGA | 8:5 | 1.60:1 | 2,304,000 |
| 2560 × 1440 | QHD / WQHD (1440p) | 16:9 | 1.78:1 | 3,686,400 |
| 2560 × 1600 | WQXGA | 8:5 | 1.60:1 | 4,096,000 |
| 3440 × 1440 | Ultrawide QHD, marketed as 21:9 | 43:18 | 2.39:1 | 4,953,600 |
| 3840 × 2160 | 4K UHD (ITU-R BT.2020) | 16:9 | 1.78:1 | 8,294,400 |
| 4096 × 2160 | DCI 4K (cinema) | 256:135 | 1.90:1 | 8,847,360 |
| 7680 × 4320 | 8K UHD (ITU-R BT.2020) | 16:9 | 1.78:1 | 33,177,600 |
To work out sizes for other ratios, use the Aspect Ratio Calculator. When turning measured pixel sizes into scalable CSS units, the PX to REM Converter helps.
Common mistakes
- Reading the CSS screen size as the hardware resolution on a scaled or Retina display. Look at the physical pixel estimate instead.
- Leaving browser zoom at something other than 100%, which shrinks or grows every CSS pixel figure.
- Using the screen size to plan breakpoints. Layouts respond to the viewport, which is smaller.
- Expecting the same numbers on every monitor. With several displays, the values usually describe the display the browser window is on, and each can have its own scaling.
- Trusting color depth too far. The specification allows browsers to report 24 when the real depth is unknown or withheld for privacy.
Use cases
- Answering a support or IT question about what display a user has.
- Checking how a website will see your device when testing responsive designs.
- Confirming that Windows scaling or macOS display settings changed what you expected.
- Choosing the right size for wallpapers, screenshots or images for a high-density screen.
Frequently asked questions
Phones have high pixel densities, so browsers report their size in CSS pixels and use a device pixel ratio of 2, 3 or more. A phone reporting a width of a few hundred CSS pixels can have well over a thousand hardware pixels across. Multiply by the device pixel ratio shown above to estimate the real figure.
1080p, or Full HD, is 1920 × 1080 pixels, which is 2,073,600 pixels in total. 4K UHD is 3840 × 2160, which is 8,294,400 pixels. That is exactly four times as many pixels, twice as many in each direction, with the same 16:9 shape.
It means each CSS pixel is drawn with 1.5 hardware pixels in each direction. On Windows this usually comes from a 150% display scale setting, or from 100% scaling combined with 150% browser zoom. Images look sharpest when they are supplied at 1.5 times their CSS display size.
The screen values describe the display the browser window is currently on. If your monitors have different resolutions or different scaling settings, the screen size and device pixel ratio change as the window moves between them. Click Refresh values if the page has not picked up the change yet.
There is no single resolution to target. Build a responsive layout that adapts to the viewport width, and test it across a range of sizes from narrow phones to wide desktop monitors. Supply high-resolution images through srcset so they stay sharp on screens with a device pixel ratio above 1.
No. Web pages can only read these values, not change them. To change the resolution or scaling, use your operating system display settings, as described above. Browser zoom, which you can change with Ctrl or Cmd and the plus or minus keys, affects only how pages are drawn.