What Is My Screen Resolution
See your screen resolution, viewport size, pixel ratio and color depth. Live.
How to use this tool
- Open this page — it runs instantly in your browser, no signup or install.
- Allow any permission prompt if asked; everything stays on your device.
- Use the on-screen controls — results update live.
See your screen resolution, viewport size, pixel ratio and color depth. Live.
How it works
This widget uses JavaScript's window.screen and window.devicePixelRatio APIs to report the full physical resolution of your display, the size of the browser viewport (the visible area inside the window), your device pixel ratio (DPR), and your reported color depth in bits per pixel.
Screen resolution is the total number of pixels your monitor or display panel supports (e.g., 1920x1080). The viewport is always smaller because it excludes the operating system taskbar, browser chrome (tabs, toolbars), and any scrollbars. Both values update live if you resize your browser window.
This tool is particularly useful for web developers testing responsive breakpoints, graphic designers sizing assets for specific screens, and users troubleshooting why a website looks different on their device versus a screenshot they were sent.
Worked example
Find the viewport size for responsive CSS testing
- Open the tool in the browser you want to test.
- Read the 'Viewport Width' and 'Viewport Height' values.
- Resize the browser window and watch the numbers update in real time.
- Note the width at which your layout breakpoints trigger.
You identify that your viewport is 1280x720 at a DPR of 2, meaning your CSS media queries should target 1280px but your canvas-based graphics need twice the pixel density.
Common mistakes to avoid
- Confusing screen resolution with viewport size — they are different values and the distinction matters for CSS media queries.
- Using the resolution figure for image export without accounting for DPR — on a 2x display you may need to export at double the pixel count for sharp results.
- Reading the numbers with DevTools open — the DevTools panel reduces the viewport size and will skew your measurements.
Key terms
- Device Pixel Ratio (DPR)
- The ratio of physical pixels to CSS pixels. A DPR of 2 means one CSS pixel equals a 2x2 block of physical pixels — common on Retina and HiDPI displays.
- Viewport
- The rectangular area of the browser window available to display a web page, excluding browser UI elements like the address bar and tabs.
- Color Depth
- The number of bits used to represent the color of each pixel. 24-bit color (16.7 million colors) is standard on modern displays.
Frequently asked questions
- Why is my viewport smaller than my screen resolution?
- Your screen resolution is the full panel size. The viewport subtracts the OS taskbar, browser toolbar, and any open DevTools panels.
- My DPR is 2 but images look blurry — why?
- Images need to be supplied at 2x their displayed CSS size to look sharp on HiDPI displays. A 100x100 CSS image should be a 200x200 pixel source file.
- Does this work on mobile?
- Yes. On phones the screen resolution often differs from the viewport due to the browser address bar, and the DPR is typically 2 or 3.