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.
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!
The calibration with a credit card would I think be easier if one corner of the calibration rectangle was in a fixed position, so moving the slider would only change the other three corners. The fixed rectangle should probably be the one on the bottom left.
Also my recommendation:
-Make the card vertical instead of horizontal (phones are held vertically)
-Add a +/- bottom on each end of the slider for fine tuning the ppi by 0.1 increment or lower,
-Allow to manually change the value in the field
This seems really inaccurate to me. I had to manually enter my device (Galaxy A55 5G), and then I held a tape measure next to my phone. What the site claimed was 16cm was actually only 14.3cm.
96dpi seems like a bad default for mobile devices. The CSS spec says the reference pixel (https://www.w3.org/TR/css-values-3/#reference-pixel) should be 96dpi at ~28" viewing distance. But handheld devices are presumed to not be seen that far away and so are built with a DPI closer to 160 (after dividing by the device pixel ratio).
Cool. This is actually really useful - I'm building a document editor at the moment. I think having the option for real-world size would be a nice feature.
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:
At the same time, the meter should be redefined so the speed of light is 300000 km/s. This would have the side effect of making the inch exactly 2.5 cm.
Diagonal measurements aren't accurate with screens with rounded corners. I suggest adding a width-and-height calibration method. Calibration with a ruler would be good too; sit the ruler on the screen and zoom/pan(/rotate?) with multi-touch.
Not really. All major browsers just use the value the OS gives them, which is usually rounded to 0.5 or 0.25, which helps keep integer CSS px values an integer number of device pixels. So you could be off as much as 12% if you are on a device that rounded down from 1.12 to 1.0.
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.
> All major browsers round this to 0.5 or 0.25, which helps keep integer CSS px values an integer number of device pixels.
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>.
Maybe it's better to say that browsers just take what the OS tells them, rather than actually deriving a device pixel ratio from first principles according to the CSS spec. Because, yeah, there's some weird devices with DPRs like 2.625, though _most_ are multiples of 0.25: https://yesviz.com/viewport/. But note how the same DPR can give a varying CSS PPI, which makes using it useless for this purpose.
1.8 probably would produce a non-integer number of CSS pixels. The browser needs (wants?) to pick a number that divides both the width and height without remainders. For 1920x1080, 1.8 doesn't (works for the height, but not the width) but 1.8̅1̅ does.
Although that has a plausible sound, I don’t think it’s it: the window size is what matters, not the screen size, and you can’t guarantee any sort of divisibility for either anyway. For example, my screen is actually 2560×1440, which is 1706⅔×960 in CSS pixels given the real devicePixelRatio of 1.5. The established rule when you need an integer is, at least on Wayland, to round things down to the nearest integer; I’m not certain about other platforms. Certainly everything that deals in integer pixels sees 1706×960.
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.
I save a screenshot for my future reference, is perfect. Maybe a suggestion to include in your website. The screenshot also shows the domain so a good way (for me) to find you again if needed
It's really clever, but the screen detection is overconfident; it gave me the green "calibrated" box while guessing a completely wrong display size for my laptop.
So, how does it attempt to identify the device? It did not recognize my device either, which could be due to my anti-fingerprint extensions or something else.
The https://amiunique.org/ website can still gather a lot of relevant information accurately (with JavaScript enabled, of course), so you might want to check their methods.
The automatic calibration was like 10% smaller than the real size and I used the credit card method [1] It need to show the "crop lines, no bleed" lines to make the comparison easier https://toastdesignservices.co.uk/resources/what-crop-marks-...
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
will adjust it thx
Fascinating.
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!
Take a look at https://anruler.com/js/ruler.js, specifically from the autoDetectDevice function.
The calibration with a credit card would I think be easier if one corner of the calibration rectangle was in a fixed position, so moving the slider would only change the other three corners. The fixed rectangle should probably be the one on the bottom left.
Working on a fix
Also my recommendation: -Make the card vertical instead of horizontal (phones are held vertically) -Add a +/- bottom on each end of the slider for fine tuning the ppi by 0.1 increment or lower, -Allow to manually change the value in the field
This seems really inaccurate to me. I had to manually enter my device (Galaxy A55 5G), and then I held a tape measure next to my phone. What the site claimed was 16cm was actually only 14.3cm.
A55 5G has a 6.6 inch screen. Also had to enter manually, but it was pretty accurate, fraction of a mm off on 12cm.
I'm currently working on fix of all this issues :)
FYI, the calibration modal is unreadable in dark mode.
Fixing it :)
96dpi seems like a bad default for mobile devices. The CSS spec says the reference pixel (https://www.w3.org/TR/css-values-3/#reference-pixel) should be 96dpi at ~28" viewing distance. But handheld devices are presumed to not be seen that far away and so are built with a DPI closer to 160 (after dividing by the device pixel ratio).
Cool. This is actually really useful - I'm building a document editor at the moment. I think having the option for real-world size would be a nice feature.
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
Petition to change the foot to be the distance light travels in one nanosecond
That measure is a ‘Hopper’: https://americanhistory.si.edu/collections/object/nmah_69246...
Dennis Hopper, because Dennis Distancelighttravelsinanansecond didn’t roll of the tongue.
At the same time, the meter should be redefined so the speed of light is 300000 km/s. This would have the side effect of making the inch exactly 2.5 cm.
I've been calling that a "metric foot" :)
Diagonal measurements aren't accurate with screens with rounded corners. I suggest adding a width-and-height calibration method. Calibration with a ruler would be good too; sit the ruler on the screen and zoom/pan(/rotate?) with multi-touch.
Adding it, will fix
Cool idea and I can see myself using this.
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...
Will fix it :)
Is it not possible to use `window.devicePixelRatio` instead of calibration?
https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...
Not really. All major browsers just use the value the OS gives them, which is usually rounded to 0.5 or 0.25, which helps keep integer CSS px values an integer number of device pixels. So you could be off as much as 12% if you are on a device that rounded down from 1.12 to 1.0.
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.
> All major browsers round this to 0.5 or 0.25, which helps keep integer CSS px values an integer number of device pixels.
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>.
Maybe it's better to say that browsers just take what the OS tells them, rather than actually deriving a device pixel ratio from first principles according to the CSS spec. Because, yeah, there's some weird devices with DPRs like 2.625, though _most_ are multiples of 0.25: https://yesviz.com/viewport/. But note how the same DPR can give a varying CSS PPI, which makes using it useless for this purpose.
“Taking whatever the OS tells them” is rather different!
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. ¯\_(ツ)_/¯
1.8 probably would produce a non-integer number of CSS pixels. The browser needs (wants?) to pick a number that divides both the width and height without remainders. For 1920x1080, 1.8 doesn't (works for the height, but not the width) but 1.8̅1̅ does.
Although that has a plausible sound, I don’t think it’s it: the window size is what matters, not the screen size, and you can’t guarantee any sort of divisibility for either anyway. For example, my screen is actually 2560×1440, which is 1706⅔×960 in CSS pixels given the real devicePixelRatio of 1.5. The established rule when you need an integer is, at least on Wayland, to round things down to the nearest integer; I’m not certain about other platforms. Certainly everything that deals in integer pixels sees 1706×960.
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.
The idea is great especially the popup scale.
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.
I will fix it, thanks to all feedback
I save a screenshot for my future reference, is perfect. Maybe a suggestion to include in your website. The screenshot also shows the domain so a good way (for me) to find you again if needed
It's really clever, but the screen detection is overconfident; it gave me the green "calibrated" box while guessing a completely wrong display size for my laptop.
What is your laptop ?
ThinkPad X1 Carbon.
I see the issue, will fix it :)
https://m.youtube.com/watch?v=JYqfVE-fykk&t=1m41s
Don't devices/browsers report the display PPI somehow? If not, that's such a gap in the web standards.
No, thx to privacy
I mean there are already APIs for location, file access, camera/mic, and more...
It guessed my phone wrong. It thought iPhone 11 Pro Max but I have the 12 Pro Max (I just double checked in phone settings).
Will fix it
Looks nice, but on a Google pixel 6 I get
> Unknown device. Using default 96 PPI. Calibrate for better accuracy.
Will fix
Cool! Even though, my iPhone 15 Pro was misidentified as iPhone 16.
:) Will fix it
It didn't recognize my Lenovo IdeaPad running Fedora.
So, how does it attempt to identify the device? It did not recognize my device either, which could be due to my anti-fingerprint extensions or something else.
Edit: see https://anruler.com/js/ruler.js.
I'll fix all this issues
The https://amiunique.org/ website can still gather a lot of relevant information accurately (with JavaScript enabled, of course), so you might want to check their methods.
My iPhone 13 Pro is incorrectly identified as an iPhone 14
Yeah I work to fix it
Nice app! My S10e was detected as a Galaxy Note 10.
thanks to all this replay I can fix everything
haha it doesnt like a VM in a citrix session
picks up my macbook 14" doesn't detect framework 13
it detects the 13 pro as a 14, probably going off of Axx chip
Fixing it
Detected: 14″ FHD @ 125% DPI (Auto-calibrated)
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
Tried a ruler and a measuring tape with my desktop LCD display it was off by 2/30 in both cases, in the same direction. Tried phone - was off by 8/20.
Nope, thanks.