window.innerHeight VS window.outerHeight计算密度？ [英] window.innerHeight vs window.outerHeight to calculate density?

问题描述

我有一个问题，当我开始发展与PhoneGap的，一把尺子一个简单的应用程序。我的大多数手机的背景是原生的Andr​​oid，所以我开始这一点。我是一个初学者的JavaScript和HTML5，web开发一般。

I had a problem when I started developing a simple app with PhoneGap, a Ruler. Most of my mobile background is with native Android, so I'm starting with that. I'm a begginer on javascript and html5, web development in general.

<一个href=\"http://stackoverflow.com/questions/12547716/how-to-draw-a-simple-ruler-with-javascript/12547974#12547974\">Here你可以看到我的相关问题，第一个问题。

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

这是我第一次来计算有多少个像素不得不以一毫米的尝试。这Android原生code正常工作。

This was my first attempt to calculate how many pixels I had in one millimeter. This works fine in Android native code.

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

但是毫米标志物被抽错了。最后经过一些尝试我更换了方法，因为它遵循

But the millimeters markers were being drawn wrong. Finally after some trying I replaced the method as it follows

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

HeightInMms在原生Android code，简单的数学计算的高度由每英寸的像素密度划分像素，乘以25.4，你一寸多少毫米都有。

HeightInMms is calculated in native android code, simple math height in pixels divided by density pixels per inch, multiplied by 25.4, how many millimeters you have in one inch.

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

长话短说，在DPI（或每英寸像素数，这是我的最终目标）我从本地code得到，或使用window.outerHeight是一个比我从window.innerHeight得到不同。为什么？

Long story short, the dpi (or pixels per inch, which is my final goal) I get from native code, or using window.outerHeight is different than the one I get from window.innerHeight. Why?

给予实际价值，我测试一个星系S2设备上，具有800像素的高度。 window.outerHeight返回800，为metrics.heightPixels，但window.innerHeight给了我533.为什么？

Giving real values, I'm testing on a galaxy s2 device, with 800px height. window.outerHeight returns 800, as metrics.heightPixels, but window.innerHeight gives me 533. Why?

推荐答案

您可以创建1英寸宽度的元素，然后索要元素的clientWidth（它与像素计量）

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

例如：

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

这篇关于window.innerHeight VS window.outerHeight计算密度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！