I used something like this before to adjust the zoom in Word or Google Docs with the real size on screen. I prefer to overlap a A4 sheet on the screen. It's semitransparent, so it's easier to see the calibration. Also I'd like to use a transparent rules on the screen and overlap it over the virtual rule for calibration.
[1] For some stupid reason, it sound scary
My setup: Firefox on X11 on a ThinkPad E15 Gen 2, with X11 misconfigured such that it is 96 DPI instead of the physically-correct 144 DPI.
On initial load, it has the green calibrated box saying "Detected: 24″ FHD Monitor (Auto-calibrated)", and my credit card measures as 131mm. This more-or-less the error that I'd expect given my misconfiguration: 131mm/85.6mm =~ 1.53 ; 144dpi/96dpi = 1.5. (Given those numbers, I figure it should be closer to 23" than 24", but whatever.)
But if I tell it "Standard Laptop", then my credit card measures as 97mm. (97mm/85.6mm =~ 1.13). I can't guess how that number is being arrived at. IME lots of X11 users will have their DPI misconfigured as either 96 DPI or (less likely) 192 DPI, but also lots of non-Apple laptops will have a pixel density of 40%-65% more than 96 DPI (on the rationale that lots misconfigured-as- or hardcoded-as- 96 DPI is common, that things designed to look good at 96 DPI assume a desktop monitor about 28" from your face (CSS3 defines device-independent pixels as such), but laptop use puts the screen 17"-20" from your face; and 28in/20in gives us a factor of 1.4 and 28in/17in gives us a factor of 1.65. But none of these numbers give me the factor of 1.13 that you show me. A good mystery!
I've been busy measuring different document editors with a screenshot of the ruler and it seems they all have different interpretations of A4 width (210 mm) at 100% on a Macbook Pro 16in:
- Apple Pages shows about 118mm
- Google docs shows 160mm in Safari
- Linearity Curve gives about 200mm
My iPhone 14 Pro was incorrectly identified as an iPhone 11 though.
Maybe it doesn’t matter since both have the same screen size, but it can be confusing since the wrong model identified even if it’s the same size.
https://www.apple.com/au/iphone/compare/?modelList=iphone-11...
https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...
Also, even if they didn't, there's no standard for what the correct DPI should be for a device; it theoretically should depend on viewing distance, but it's impractical to constantly change the screen DPI depending on how far away the user's eyes are :)
OP could, however, use a better default than 96 DPI for mobile devices. Most are targeting ~160-ish.
This is completely false. No browser that I know of does any such thing, nor would it make any sense to do so (nor would it achieve the goal you specify to any meaningful extent).
The closest thing that does happen is that browsers use integer fractions of pixels as their basic layout unit: Firefox and its kin sixtieths, Chrome and its kin sixty-fourths.
But the rest of your answer is correct; and to add a proper citation: “the reference pixel is the visual angle of one pixel on a device with a device pixel density of 96dpi and a distance from the reader of an arm’s length” <https://drafts.csswg.org/css-values-4/#reference-pixel>.
It also gets multiplied by the browser’s zoom, which in both Firefox and Chrome include values like 80%, 90% and 110%.
So for me on HN at 120% on my 1.5× laptop display, devicePixelRatio is… 1.8181818181818181. Huh. Wonder why it’s not 1.8. ¯\_(ツ)_/¯
Chromium doesn’t exhibit this behaviour; it’s just Firefox on some of its zoom levels. And when I saw 90% being 0.9090909090909091 (90⁄99 instead of 90⁄100) it triggered a memory of observing this five or seven years ago on my Surface Book (3000×2000 @ 2×). I think it is just that they’ve chosen to display different, slightly inaccurate percentage labels.
Issues I faced: I use 27" Qhd monitor at 125% scale. The ruler showed 48cm width intially but when I shifted to 100% scale it became 60cm. If I shift to FHD, it goes to 36cm. I thought an actual size ruler will maintain width. Let me know if I am not using it correctly.
> Unknown device. Using default 96 PPI. Calibrate for better accuracy.
Edit: see https://anruler.com/js/ruler.js.
Inches are 2.2" per inch and CM are also over 2 CM in length, almost an inch, just short.
But hey, even CMs are wrong and wonderfully explained in this short - enjoy https://www.youtube.com/shorts/Z2LLcVM2ih4
Nope, thanks.