Screen resolution
—
Usable window
—
Your window inside your screen
The window you are reading this in takes up — of your screen area. The rest goes to the browser interface, the system bars and whatever else is around.
What does this mean for your website?
Your screen draws — dots for every pixel a website measures with. An image uploaded at the exact size it displays at will look blurry: it has to be uploaded at twice that.How to prepare your images →
Your screen is standard density: one dot per pixel. Here an image uploaded at double size improves nothing and only weighs more — but visitors on a modern phone will need it that way.
You are reading this in a narrow window, phone-sized. That is exactly the width where half the enquiries get lost: menus that do not fit, small buttons and forms that force you to zoom.
It looks like your browser is zoomed to roughly —. Worth knowing before assuming something "looks broken": with the zoom changed, what you see is not what someone at 100% sees. Ctrl+0 puts it back, or Cmd+0 on a Mac.
Your primary pointer is touch. In that case anything tappable should be at least 44 pixels across: below that, people miss and leave.
Your system asks for a dark theme, and this page is honouring it without you touching anything. If your own site only exists in light mode, it looks worse than it should for you today.
You have reduced motion switched on. This site honours it and turns its animations off; many sites ignore it, and for anyone who enables it because of vertigo or migraine that is not a cosmetic detail.
How to use it
01
Read the numbers
They appear on their own when the page opens. The window figures recalculate as you move or resize it.
02
Copy the report
One button puts everything on your clipboard as plain text, ready to paste into an email.
03
Send it with your question
If something looks wrong on your machine, this saves three rounds of email trying to reproduce it.
"Resolution" is not one single thing
This is where nearly all the confusion comes from: five different measurements people call by the same name, which almost never match on the same device.
- Screen resolution
- The size of the whole monitor as the system counts it. This is the number almost everyone means by "my resolution".
- Usable window
- The gap the page actually fits into, with tabs, address bar and scrollbars already subtracted. This is the measurement that governs design decisions.
- Physical pixels
- The real dots on the panel. On high-density screens there are two or three of them per CSS pixel, which is why an image at the exact size looks blurry.
- Pixel density
- How many physical dots the device draws for each CSS pixel. A 1 is an ordinary screen; a 2 or a 3 is a high-resolution one.
- Available space
- The screen minus whatever the operating system keeps: the Windows taskbar, the macOS Dock, the menu bar.
- Page zoom
- How far you have zoomed in or out with Ctrl and the scroll wheel. The browser does not publish it as a property, so it is estimated here; zooming to 150% is like having a screen a third narrower.
Need the aspect ratio of some other size, or to resize without distorting? Use the aspect ratio calculator →
All of this is known about you without asking
None of this data needs a permission prompt or a notice. The browser exposes it so pages can adapt — and it is needed: without it there would be no responsive design and no automatic dark theme — but combined it forms a fingerprint that identifies a device without cookies.
This page shows them and stops there: it does not store them, send them or cross-reference them with anything. It is the same decision we made across this site, which carries no analytics and no tracking cookies — and therefore never asks you to accept anything.
Frequently asked questions
Why does the resolution here not match what my system reports?
Usually for two reasons. The first is scaling: if your system is set to 125% or 150% — normal on Windows laptops — the browser sees a proportionally smaller screen, and that is the measurement a website works with. The second is density: an Apple laptop with a retina panel has twice as many physical dots as CSS pixels. That is why this page shows both figures separately instead of picking one.
What is the "usable window" and why is it smaller than my screen?
It is the space left for the page after subtracting tabs, address bar, scrollbars and, if the window is not maximised, everything outside it. It is the measurement that matters when designing and testing: a website does not adapt to your monitor, it adapts to that gap.
Is any of this sent to a server?
No. Everything here is read by your browser about itself and painted on your own screen. There is no network request, nothing is stored, and this site uses no tracking cookies. The copy button puts the report on your clipboard: you decide who receives it.
Can any website see all of this about me?
Yes, and that is the interesting part. None of this data needs permission: these are properties the browser exposes to any script so pages can adapt themselves. Combined, they help build a fingerprint that identifies a device without cookies. Seeing them together is the best way to understand what is known about you without your having agreed to anything.
Why do the browser or the system show as "not identified"?
Because that part is inferred from the user agent string, which is free text anyone can change. Browsers have spent decades lying in it for compatibility reasons, and privacy extensions falsify it on purpose. The screen numbers are real measurements; the browser name is a reasonable guess, and we would rather say so.
What does a pixel density of 2 or 3 mean?
That your screen draws two or three dots for every pixel a website uses to measure. It is what makes text look sharp, and it is also what makes an image uploaded at the exact size look blurry: it has to be uploaded at twice the size to use those dots.
Why is the zoom "estimated" rather than exact?
Because no browser publishes the zoom level. What can be measured is the relationship between the browser window, which does not change when you zoom, and the gap the page fits into, which does shrink: that division gives the zoom to within a couple of points, because the scrollbar and the window borders are not counted the same way in both measurements. So the result is rounded to the nearest step browsers actually offer — 90, 100, 110, 125 — and that is why we call it an estimate. If the figure is not 100%, that is the relevant part, not the decimal.
What about pinch zoom on a phone?
That one is exact, and it appears as a separate row when there is any. They are different things: page zoom changes how much room the site thinks it has and makes it reflow; pinch only magnifies what is already drawn, like a lens. A phone can have both at once.
Can I use this to check how my site looks at other sizes?
For the size in front of you, yes: resize the window and watch the numbers move. To simulate a real phone, use your browser developer tools instead — they also fake the touch pointer and the device pixel density.
Background reading
Explained on the blog
Does your site look odd at some size?
With this data and a screenshot we usually reproduce the problem first time. And if what you need is for it to stop happening at every size, that part is our job.
We reply within one business dayBogotá · UTC−5