Window.innerHeight vs window.outerHeight for density calculation?

Question

I had a problem when I started developing a simple program using PhoneGap, Ruler. Most of my mobile background is with native Android, so I start with this. I start on javascript and html5, web development in general.

Here you can see my first question related to the problem.

This was my first attempt to calculate how many pixels I had per millimeter. This works great in the Android source code.

public float getYdpi() { return displayMetrics.ydpi; } function getPixelsPerMillimeter(){ return YDpi/25.4f; } 

But millimeter markers were wrong. Finally, after some attempts, I replaced the method as follows

  function getPixelsPerMillimeter(){ var pixelsPerMms = window.innerHeight/heightInMms; return pixelsPerMms; } 

HeightInMms is calculated in the Android source code, the simple mathematical height in pixels divided by the pixel density per inch multiplied by 25.4 how many millimeters you have per inch.

 public float getPhoneHeightInMillimeters(){ metrics = gap.getResources().getDisplayMetrics(); return (metrics.heightPixels / metrics.ydpi)*25.4f; 

In short, dpi (or pixels per inch, which is my final goal), I get from my own code or using window.outerHeight is different from what I get from window.innerHeight. What for?

Giving real values, I am testing a galaxy s2 device with a height of 800 pixels. window.outerHeight returns 800, like metrics.heightPixels, but window.innerHeight gives me 533. Why?

Answer 1

You can create an element with a width of 1 inch, and then ask for the clientWidth of the element (it is measured in pixels).

Example:

 function getPixelsPerInch() { var d = document.createElement("div"); var ret; d.style.opacity = 0; d.style.width = "1in"; d.style.position = "fixed"; d.style.padding = 0; document.body.appendChild(d); ret = d.clientWidth; document.body.removeChild(d); return ret; } alert(getPixelsPerInch()); 

I suggest avoiding doing block calculations and relaying in the browser when possible, for example, you can calculate pixels per millimeter as follows:

 function getPixelsPerMillimeter() { var d = document.createElement("div"); var ret; d.style.opacity = 0; d.style.width = "1mm"; d.style.position = "fixed"; d.style.padding = 0; document.body.appendChild(d); ret = d.clientWidth; document.body.removeChild(d); return ret; } alert(getPixelsPerMillimeter()); 

Or a more general approach:

 function getPixelsPer(unit) { var d = document.createElement("div"); var ret; d.style.opacity = 0; d.style.width = unit; d.style.position = "fixed"; d.style.padding = 0; document.body.appendChild(d); ret = d.clientWidth; document.body.removeChild(d); return ret; } function getPixelsPerInch() { return getPixelsPer("1in"); } function getPixelsPerMillimeter() { return getPixelsPer("1mm"); } alert(getPixelsPerInch()); alert(getPixelsPerMillimeter()); alert(getPixelsPer("1cm")); // and so on...