Real DPI

Visually detect our browsers real screen resolution and DPI.

Browsers have broken the internet. Instead of making available their real resolution and DPI, they spoof the DPI to the self-proclaimed "standard" of 96 dots per inch.

The hack effectively changes your high-resolution and flagship expensive screen to something like 384x854

Why is this a problem

Browser coordinates used to position page elements are floating point. This scales for any screen size and this spoofing is generally invisible.

The problem arises with procedural generated content, specifically <canvas> in combination with context2d.putImageData() which is integer based.

To compensate you need to oversample the canvas. MDN suggests using window.devicePixelRatio. In theory window.availableWidth/Height times window.devicePixelRatio should be the physical pixel size, only experience reveals this is seldom the case.

Why this page

Browsers lie, hide and conceal the physical pixel size of your screen.
However, carefully constructing the canvas can produce moiré effects when down sampled.
The patterns give visual hints to determine the actual size.

The CSS standard has sadly botched the meaning of DPI by fixating it to being 96 on any screen on any device.
Browser builders have tried to compensate this by introducing `window.devicePixelRatio`.
Sadly, even that does not always reveal reality.

There is currently no way to get any physical screen measurements or real DPI using javascript.

How to determine your REAL dpi

Press "Enter full-screen" to remove text.

Put the browser into full screen mode, mobiles are usually exclusively full-screen. Pressing also toggles the display of this text to remove any scroll bars. If present, you should also hide side panels like history and bookmarks.

For mobile, hold it in portrait.

Firefox for android really dropped the banana here. On my device, portrait is 980*1524. For landscape you would expect 1524*980 but in reality it is reported as 980*630.

Find the moiré pattern.

Directly below is a PNG of the moiré pattern to expect and search. Use the slider to find an approximation of the moiré pattern. The greater the distance between the green bars, the better. If you find more than one, use the left-most version.

Read the guessimate.

It shows your real horizontal resolution and DPI.

Try with landscape.

Rotate to landscape. If screen.availWidth equals body.clientWidth then you're safe.

---

☛ Enter full-screen ☚

Browser reports:

Your display:

screen.availWidth:
screen.availHeight:
window.devicePixelRatio:
body.clientWidth: ! Different than screen.availWidth
body.clientHeight: ! Different than screen.availHeight

Real values:

physical width:
device pixel ratio:

Example:

Find the moiré pattern and maximize the distance between the stripes.
Alternatively try to match the shown physical width with what you know.

If the bar below is solid green, then the exact DPI was automatically detected.