title: Making Sense of Android meta-viewport scaling: What am I missing?
body: <p>I have been trying to determine how the viewport -- and the contents within -- are affected by the viewport meta tag used for drawing content with WebView or with the native browser.</p>
  
  <p>What I have run in to are some apparent inconsistencies. I created a small page (see below) with an image and some javascript for displaying the viewport size so I can visually see the scaling with the image as well as get the exact numbers.</p>
  
  <p>First, a some observations: </p>
  
  <ol>
  <li>None of the viewport width numbers are exactly what I expected, just close. </li>
  <li>When the numbers are close to the device pixel count, the drawing is actually done one-for-one -- or at least is visibly looks that way.</li>
  <li>If the page size (document size) is under that of the viewport size, the viewport numbers shrink. That is, the viewport doesn't always necessarily represent the maximum possible visible space -- just the current visible space.</li>
  <li>Likewise, in the native browser, the viewport size is adjusted by the top bar. The size increases as it scrolls off the screen. The numbers given are for full screen display.</li>
  </ol>
  
  <p>Device #1: Physical screen is 1024x600 and it's running Android 2.2.</p>
  
  <ol>
  <li>initial-scale=1.0 => 676x400</li>
  <li>initial-scale=1.0, width=device-width => 676x400</li>
  <li>initial-scale=2, width=device-width => 338x200</li>
  <li>initial-scale=2, width=device-width, target-densitydpi=device-dpi
  => 507x300</li>
  <li>initial-scale=0.5, width=device-width,
  target-densitydpi=device-dpi => 800x473</li>
  <li>initial-scale=0.9, width=device-width,
  target-densitydpi=device-dpi => 800x473</li>
  <li>width=device-width, target-densitydpi=device-dpi => 1014x600</li>
  <li>initial-scale=1.0, width=device-width,
  target-densitydpi=device-dpi => 1014x600</li>
  <li>initial-scale=0.5, width=device-width,
  target-densitydpi=device-dpi, minimum-scale=0.1 => 2028x768</li>
  <li>initial-scale=0.5, width=device-width,
  target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no =>
  1014x600</li>
  </ol>
  
  <p>Device #2: Physical screen is 800x480 and it's running Android 2.3.2.</p>
  
  <ol>
  <li>initial-scale=1.0 => 527x320</li>
  <li>initial-scale=1.0, width=device-width => 527x320</li>
  <li>initial-scale=2, width=device-width => 263x160</li>
  <li>initial-scale=2, width=device-width, target-densitydpi=device-dpi
  => 395x240</li>
  <li>initial-scale=0.5, width=device-width,
  target-densitydpi=device-dpi => 790x480</li>
  <li>initial-scale=1.0, width=device-width,
  target-densitydpi=device-dpi => 790x480</li>
  <li>initial-scale=0.5, width=device-width,
  target-densitydpi=device-dpi, minimum-scale=0.1 => 1580x768</li>
  <li>initial-scale=0.5, width=device-width,
  target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no =>
  790x480</li>
  <li>width=1580, target-densitydpi=device-dpi =&gt; 790x480</li>
  <li>width=1580, target-densitydpi=device-dpi =&gt; 790x480</li>
  <li>width=1580, target-densitydpi=device-dpi, minimum-scale=0.1
  =&gt;790x480<br>
  </ol>
  
  <p>Of these results, the following don't make sense:</p>
  
  <ol>
  <li>Device #1, items 5, 6, and 10</li>
  <li>Device #2, items 5, 8, 10, 11, 12</li>
  </ol>
  
  <p>Does anyone know what's going on with those that don't make sense?</p>
  
  <p>Does anyone know why many of the values are 10 pixels shy of match the physical pixels, but that result is as if they match? (e.g. 1.7 and 2.6)</p>
  
  <p>Am I doing something wrong, or does it appear that it's impossible to zoom out beyond 1.0 unless the user is also allowed to scale and the minimum-scale value is set?</p>
  
  <p>That is, even though the valid values are 0.01 to 10, initial-scale values under 1.0 are ignored unless you can also set the minimum scale.</p>
  
  <p>The <a href="http://developer.android.com/guide/webapps/targeting.html" rel="noreferrer">Android docs do</a> say when user-scalable is no that the min/max scale values are ignored. That doesn't seem very useful. And 2.9-2.11 seem to show that you can't just calculate it yourself and set the width.</p>
  
  <p>Finally, the HTML I'm using:</p>
  
  <pre><code>&lt;html&gt;
  &lt;script src="http://code.jquery.com/jquery-1.4.4.js"&gt;&lt;/script&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no" /&gt;
  &lt;/head&gt;
  &lt;body style="margin:0;"&gt;
  &lt;div id="bld" class="bld" style="position:absolute; width:250px; height:125px; left:50px; background-color:#ccccff;"&gt;Hello world.&lt;/div&gt;
  &lt;img id="bl1" src="http://commondatastorage.googleapis.com/kf6nvr/images/1024x768.png" /&gt;
  &lt;script&gt; 
  $("#bl1").click(function(){
      var pageWidth = $(document).width();
      var pageHeight = $(document).height();
      var viewportWidth = $(window).width();
      var viewportHeight = $(window).height();
  
       $("#bld").html("Page width: "+pageWidth+"&lt;br /&gt;pageHeight: "+pageHeight+"&lt;br /&gt;port width: "+viewportWidth+"&lt;br /&gt;port height: "+viewportHeight);
  });
  &lt;/script&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So... what am I missing?</p>