0

I want to make a website, where an object which has for example a width of 100mm, is displayed with that width no matter what resolution the monitor or smartphone has.

For that reason I'm asking the user for his display dimensions to calculate the right ppi. However it doesn't work on all devices.

EDIT: This is the code I have so far:

var dpr = window.devicePixelRatio;
var inch = 25.4;

var pixelHeight = screen.height * dpr;
var pixelWidth = screen.width * dpr;

function calculatePpi(monitorDiagonal) {
    return (Math.sqrt(Math.pow(pixelWidth, 2) + Math.pow(pixelHeight, 2))) / monitorDiagonal;
}

function mmToPx(mm) {
    return  (((mm / inch) * calculatePpi(monitorDiag)));
}
41 72 6c
  • 1,600
  • 5
  • 19
  • 30
Codan
  • 21
  • 3
  • "However it doesn't work on all devices." asking doesn't work on all devices? Please share your code with us... – Luca Kiebel May 31 '18 at 20:33
  • @Luca I think Codan is trying to make a ruler, and all he's asking is hot to make it, setting it to `100mm` - actually the exact `100mm` on all devices. – Roko C. Buljan May 31 '18 at 20:37
  • Well that isn't possible for the reasons you've stated in your post. ppi. – Joe Warner May 31 '18 at 20:38
  • 1
    The dimensions the manufacturer tells the screen has often includes the external margin, so this information is misleading. Also 90% of the users don't know what the hell is a resolution, so relying on what they tell you to make things work will most certainly prove to be problematic. – Havenard May 31 '18 at 20:38
  • @RokoC.Buljan That's exactly what i'm trying to do. – Codan May 31 '18 at 20:39
  • Have you tried seeing how https://mydevice.io/ does it? Apparently it can guess your dpi. – Havenard May 31 '18 at 20:40
  • Than this might be a duplicate of https://stackoverflow.com/questions/36600114/how-accurate-is-using-millimeters-in-css – Roko C. Buljan May 31 '18 at 20:41
  • @JoeWarner Well, how does [this](http://iruler.net/) ruler work then? – Codan May 31 '18 at 20:42
  • @Codan The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else, but only if your output device has a high enough resolution. On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn't require that. And indeed, the result tends to be different from one device to another – Joe Warner May 31 '18 at 20:45
  • 1
    I'd say https://www.mydevice.io/ code holds everything you need, apparently they have a database with information for each device, and they were kind enough to make those tables available. – Havenard May 31 '18 at 20:51
  • @Havenard nice find, but again, doesn't seem to work correctly when using an external monitor plugged in... – Roko C. Buljan May 31 '18 at 21:01

1 Answers1

0

Use css height and width.

The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.

So if for example you want to show 35cm width and 50cm height element you can set it with css:

#example {
  height: 50cm;
  width: 35cm;
}

Good luck!

It seems that although this should work, it's not enough accurate. See comments.

A. Meshu
  • 4,053
  • 2
  • 20
  • 34
  • Are you saying that a height of `50cm` will be the real-world's `50cm` on all devices? – Roko C. Buljan May 31 '18 at 20:40
  • This is what i understand when i read docs on it. Why? Do you know something else? Please share – A. Meshu May 31 '18 at 20:42
  • 1
    No, I'm just asking you, and making clear you understood the question correctly, since you didn't stated in your answer such like: *"Yes, you can be assured that `1cm` or `10mm` will be exact like in real-world - on all devices".* - which is something I never explored but was thinking about a couple of days ago :D – Roko C. Buljan May 31 '18 at 20:46
  • 1
    I upvoted your comment since you made me take meter and measured the screen. It works with 5cm (-: – A. Meshu May 31 '18 at 20:50
  • https://github.com/w3c/csswg-drafts/issues/614 So I have two screens, both 1920px - of my laptop and external monitor - and I made two identical jsBins with a DIV 10cm wide. And NO. They're not the same size. On my laptop the DIV is almost 3cm (realworld's cm) smaller - which is already a huge issue - if you ask me – Roko C. Buljan May 31 '18 at 20:58
  • 5cm minus 1.5mm. I'm reading the docs again. Maybe it's not just css. – A. Meshu May 31 '18 at 21:14