What is my viewport size
Your viewport, screen resolution, and device pixel ratio at a glance. Perfect for filing bug reports or testing responsive layouts.
How to use this tool
- 1The values below read your current browser state automatically.
- 2Resize the window and viewport width and height update live.
- 3Copy any value with the button next to it for pasting into bug reports.
About this tool
Viewport dimensions are what CSS media queries respond to, while screen resolution is the full physical display. Device pixel ratio (DPR) tells you how many physical pixels render one CSS pixel, which matters for high-DPI displays and image asset planning. All three matter when reproducing a layout bug.
Frequently asked questions
What is the difference between viewport size and screen resolution?
Viewport size is the visible area inside your browser window, the area CSS media queries use. Screen resolution is the full display size, including the OS taskbar, browser chrome, and any other windows.
What is device pixel ratio (DPR)?
DPR is the number of physical screen pixels per CSS pixel. It depends on both the panel and the OS scaling setting: most desktop monitors at default scaling report 1, while Retina, HiDPI laptops, and most phones report 2 or 3. It affects how sharp images and text appear and which @2x or @3x asset to load.
Do you store these values?
No. Everything is read on your device and stays in your browser. Nothing is sent to a server.
Why does the viewport size change when I resize?
Viewport reflects the current size of the browser content area. As you resize the window, CSS recalculates and media queries trigger different breakpoints. That is exactly what this tool shows you in real time.
Reviewing work with your team?
Pin comments directly on a live website or design — no extension, no setup.