title: window.innerHeight vs window.outerHeight to calculate density?
body: <p>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.</p>
  
  <p><a href="https://stackoverflow.com/questions/12547716/how-to-draw-a-simple-ruler-with-javascript/12547974#12547974">Here</a> you can see my first question related to the issue.</p>
  
  <p>This was my first attempt to calculate how many pixels I had in one millimeter. This works fine in Android native code.</p>
  
  <pre><code>    public float getYdpi() {
          return displayMetrics.ydpi;
      }
  function getPixelsPerMillimeter(){
      return YDpi/25.4f;        
  }
  </code></pre>
  
  <p>But the millimeters markers were being drawn wrong. Finally after some trying I replaced the method as it follows</p>
  
  <pre><code> function getPixelsPerMillimeter(){
      var pixelsPerMms = window.innerHeight/heightInMms;
      return pixelsPerMms;    
  }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>public float getPhoneHeightInMillimeters(){     
      metrics = gap.getResources().getDisplayMetrics();                   
      return (metrics.heightPixels     / metrics.ydpi)*25.4f;
  </code></pre>
  
  <p>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? </p>
  
  <p>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?</p>