窗口内部高度与窗口外部高度如何计算像素密度？

Question

我在使用PhoneGap开发一个简单的应用程序——尺子时遇到了问题。我的移动端背景大多是本地Android，所以我从那里开始。我是JavaScript和HTML5的初学者，对Web开发一般也不熟悉。 这里您可以看到与该问题相关的我的第一个问题。

这是我第一次尝试计算一毫米有多少像素。这在Android原生代码中运行良好。

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

但是毫米标尺被绘制错误。最终，经过多次尝试，我将方法更改如下：

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

HeightInMms是在本机Android代码中计算的，简单的数学公式是将像素高度除以每英寸像素密度，乘以25.4，得出一英寸有多少毫米。

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

长话短说，从本地代码或使用window.outerHeight得到的dpi（每英寸像素数，也是我的最终目标）与从window.innerHeight得到的dpi不同。为什么？

以实际值为例，我正在galaxy s2设备上进行测试，高度为800px。 window.outerHeight返回800，如metrics.heightPixels，但window.innerHeight给出533。为什么？

- caiocpricci2

---

来自MDN，window.outerHeight获取整个浏览器窗口的像素高度。它代表整个浏览器窗口的高度，包括边栏（如果已展开），窗口chrome和窗口调整大小的边框/手柄。 - Paul S.

Answer 1

你可以创建一个宽度为1英寸的元素，然后请求该元素的clientWidth（以像素为单位测量）

例如：

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());

我建议尽可能避免进行单位计算，而是在可能的情况下依赖于浏览器。例如，您可以通过以下方式计算每毫米像素数：

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());

或者更通用的方法：

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...

- dseminara