2

I want to get div height in inches.
I'm using this code but this is not returning correct values

<div id="test" style="width:2in;height:3in"></div>

Here is a javascript code.

var dpi_x = document.getElementById('test').offsetWidth;
var dpi_y = document.getElementById('test').offsetHeight;
var width = screen.width / dpi_x;
var height = screen.height / dpi_y;
console.log(width);
console.log(height);

Check it by yourself this is not return 2 and 3 inches.

Rahul Patel
  • 5,248
  • 2
  • 14
  • 26
Azeem Haider
  • 1,443
  • 4
  • 23
  • 41
  • what is the expected answer? – brk Sep 04 '16 at 06:36
  • http://stackoverflow.com/questions/10794891/getting-height-of-a-div-in-centimeter-using-jquery HEre ya go, just change the px from centimeters to inches – Trying to Learn Javascript Sep 04 '16 at 06:37
  • Your output would NEVER return 2 and 3 because ... dpi_x will be the number of pixels in 2 inches ... screen width divided by that number wont be 2, unless your screen is 4 inches wide - your main problem is your maths – Jaromanda X Sep 04 '16 at 07:40
  • as far as browsers are concerned, the DPI is what the OS tells them it is ... windows LIES about the DPI :p – Jaromanda X Sep 04 '16 at 07:50
  • There are various sites that purport to show a ruler on-screen at "real size". They have to do things like detect what laptop/OS/etc. you are using to do it correctly. You could use their tricks. Examples: https://www.piliapp.com/actual-size/cm-ruler/ and http://www.ginifab.com/feeds/cm_to_inch/actual_size_ruler.html – Thomas David Baker Sep 04 '16 at 09:32

1 Answers1

0

However you could set the div size to be in centimeters or inches this generally doesn't work. In order to show block in correct size, browser have to how screen size (or DPI). But OS doesn't tell browser what is your monitor size (probably OS doesn't know it itself).

Online rulers, such as http://iruler.net, uses some tricks to detect your device. For example, different smartphones send different USER_AGENT http header, so basing on combination of http headers, screen size (in pixels) etc. those sites assume what device are you using and then able to display dom elements in real size.

Sergey Vinogradov
  • 1