For meaningful results set the browser zoom-level to 100% (press: ctrl-0)

This Window

static values
CSS Screen width/height:	x
Available width/height:	x
Orientation / Angle:	/
Resolutions
Pixel Resolution:
Megapixels:
PPI - Pixels per inch:
color / pixel Depth (aka colour precision):	/
DPR - Device Pixel Ratio:
Root font size:
Body font size:
Scrollbar width:

dynamic values
Window (incl. Scrollbar):
inner Width:
inner Height:
viewable surface:
Window (excl. Scrollbar):
client Width:
client Height:
outer Window - use case(?):
outer Width:
outer Height:

Open issue(s)

The color marked areas should represent real sizes of one centimeter and inch.

Measure it to verify output results!
Only to find that something is odd. For some reason browsers at a zoom-level of 100% do not show the proper results!
Add 10%. {margin-left: calc(2.54cm + 0.254cm);} or set the browser to 110%, so that the Device Pixel Ratio (dpr) equals 1.375!
That way the results colored in red are correct (but the procedure is at fault).
Where does the 10% correction come from? How come 108px equal one inch in this case (environment)?

Calculation: Unit conversion: 1 ⁢ inch = 2.54⁢cm = 96⁢px = 72⁢pt

Attention: It seems that browsers are wrongly set to 96dpi. Why aren't browsers using the display settings from the OS they are running on?

In order to display exactly one inch on the screen the following settings are applied:
Windows 10: recommended settings at 125% selected.
Chrome Browser: scale to 110% selected
based on a Lenovo Thinkpad W701 (1920 x 1200, 17")
Verified on Chrome, Opera and Firefox.
IE 11 allows & requires a custom setting of 139%.
Edge at 125% scaling is too small and too big at the next scale level of 150%.

It's better to use the function match.media: https://developer.mozilla.org/en-US/docs/Web/API/window.matchMedia