Sizing an image in centimetres

Question

I have an SVG image which I'd like to display on screen at exactly 15×15cm, regardless of screen resolution, pixel density, etc.

<img src="foo.svg" class="foo">

.foo {
    width: 15cm;
    height: 15cm;
}

This causes the image to render at approximately 15×15cm, but there is quite a bit of deviation, particularly on tablet devices (my iPad rendered it at 8.3×8.3cm).

I get that cm measurements are intended mainly for print, but is there a way to reliably replicate them on screen?

A more interesting question why does it have to be the exact size on the screen? — Ed Heal, Jul 23 '16 at 10:11
It doesn't really make sense to make it exactly 15x15 - I mean think about it. The "exact" needs to be measured in pixels. So each device is different. Does it really sound that something is plausible like this? — Noam Rodrik, Jul 23 '16 at 10:11
@Noam Rodrik I know each device is different. I was kind of hoping the device would be smart enough to know how many pixels would equate to 15cm. — Sam Hastings, Jul 23 '16 at 10:13
@Ed Heal The goal is to allow the user to trace the image onto a piece of paper placed over their screen. The goal becomes pretty much worthless if the image is the wrong size :-) — Sam Hastings, Jul 23 '16 at 10:15
Is it possible to get the device's measurements on your page? If yes, then it is possible. — Noam Rodrik, Jul 23 '16 at 10:15
Why not just allow them to print it out? I can email a blank page if paper is the problem! — Ed Heal, Jul 23 '16 at 10:16
With a little research- this can help you find the DPI of the device: http://stackoverflow.com/questions/279749/detecting-the-system-dpi-ppi-from-js-css With the DPI, you can calculate the centimeters for each device. Cheers! — Noam Rodrik, Jul 23 '16 at 10:27

score 0 · Answer 1 · answered Jul 23 '16 at 10:43

There really isn't any good way to do this. While devices do sometimes know how large their physical screen is, they won't communicate this information to a Web page.

If you think about it, most of the time you wouldn't want exact physical sizes anyway. Some devices, like phones, are held closer to your face, so their text is smaller. On the other hand, if your page is showing up on a TV screen you'd want the text to be larger so you could read it from farther away.

You might be able to get close by checking user agents on mobile devices, but this approach will not work for desktop browsers, where user agents tell you very little about the hardware.

score 0 · Answer 2 · answered Jul 23 '16 at 10:48

That is (as good as) impossible.

My monitor is full HD. So is my phone, it has the same amount of pixels so we can not use that. After that, there isn't really anything left.

The nearest solution I can come up with is to find some database with actual sizes of screen, and scale from there. But I doubt you can find such a database for the thousands of types of screens.

Sizing an image in centimetres

2 Answers2