What are my resolutions?

Every once in a while I need to check what the resolutions of my devices are, especially when I'm working on my theme.

Important: There is a difference between the observed resolution via the JavaScript methods like screen.width and the physical resolution of your device. That's where window.devicePixelRatio (DPR) comes in.

Why should I care? The media query breakpoints depend on the observed resolution, so you cannot just look into the tech data of your device and take the display resolution without checking for the DPR.

Fun fact: The DPR also changes on zooming! The window.VisualViewport.scale property is still experimental, and thus we cannot reliable determine the difference between zooming vs pixel ratio settings by your device. [2020-09]

Screen/Device resolution

Values of the absolute screen estate, not what's usable for the page.

Observed/JavaScript

screen.width x screen.height = ??? x ???

window.devicePixelRatio = ? device pixels per CSS pixel

True/Physical

screen.width x screen.height = ??? x ???

Note: if you zoomed these values will not reflect the real physical dimensions anymore!

Visible resolution

Values of the screen estate available for the page, so minus application chrome like tool bars and interface controls.

Observed/JavaScript

window.innerWidth x window.innerHeight = ??? x ???

window.devicePixelRatio = ? device pixels per CSS pixel

True/Physical

window.innerWidth x window.innerHeight = ??? x ???

Bonus: PPI (pixel per inch)

Nice trick to check PPI: create a <div> with 1in height/width and measure the pixel value.

Calculated PPI: ??? ppi

Note: DPI (dots per inch) should not be used as a term for displays, because dots are a unit used in print (the physical ink dots on the paper). You can read more about it on 99designs. Sadly both units are used interchangeably sometimes, which makes the situation more confusing. Maybe it's because we talk about displays and densities, so we keep using dpi when ppi would be the right one.