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

This Window

static values
CSS Screen width/height:	1280 px x 720 px
Available width/height:	1280 px x 720 px
Orientation / Angle:	landscape-primary / 0
Resolutions
Pixel Resolution:	921600 px
Megapixels:	0.9216 px
PPI - Pixels per inch:	96 px/inch
color / pixel Depth (aka colour precision):	24 bit / 24 bit
DPR - Device Pixel Ratio:	1
Root font size:	10px
Body font size:	12px
Scrollbar width:	0 px

dynamic values
Window (incl. Scrollbar):
inner Width:	1280 px
inner Height:	720 px
viewable surface:	100 square inches
Window (excl. Scrollbar):
client Width:	1280 px
client Height:	720 px
outer Window - use case(?):
outer Width:	1280 px
outer Height:	720 px

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