title: scale fit mobile web content using viewport meta tag
body: <p>I'm trying to figure out how to leverage the mobile viewport meta tag to automatically zoom the contents of a HTML page to fit into a web view.  </p>
  
  <p>Constraints:</p>
  
  <ul>
  <li>The HTML may or may not have fixed size elements (ex img has a fixed width of 640). In other words I don't want to force the content to be fluid and use %'s.</li>
  <li>I do not know the size of the webview, I just know its aspect ratio</li>
  </ul>
  
  <p>For example, if I have a single image (640x100px) I want the image to zoom out if the webview is 300x250 (scale down to fit).  On the other hand, if the webview is 1280x200 I want the image to zoom in and fill the webview (scale up to fit).</p>
  
  <p>After reading the <a href="http://developer.android.com/guide/webapps/targeting.html" rel="noreferrer" title="android docs">android docs</a> and the <a href="http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html" rel="noreferrer">iOS docs</a> on viewports, it seems simple: since I know the width of my content (640) I just set the viewport width to 640 and let the webview decide if it needs to scale the content up or down to fit the webview.</p>
  
  <p>If I put the following into my android/iPhone browser OR a 320x50 webview, the image does not zoom out to fit the width.  I can scroll the image to the right and left..</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;title&gt;Test Viewport&lt;/title&gt;
      &lt;meta name="viewport" content="width=640" /&gt;
      &lt;style type="text/css"&gt;
      html, body {
        margin: 0;
        padding: 0;
        vertical-align: top;
      }
  
      h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td 
      {
        margin: 0;
        padding: 0;
        border: 0;
        font-weight: normal;
        font-style: normal;
        font-size: 100%;
        line-height: 1;
        font-family: inherit;
        vertical-align: top;
      }       
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;img src="http://www.dmacktyres.com/img/head_car_tyres.jpg"&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What am I doing wrong here?  Does the viewport meta tag only zoom into content that is &lt; the  webview area?</p>