title: CSS or Javascript that can resize any HTML viewed on iphone
body: <p>I'm trying to come up with some CSS or Javascript that can autoresize <strong>any</strong> HTML that is being viewed in iPhone browser (UIWebview component) such that the content fits the viewport and the images/text all resize. (not the same as achieving a zoom out).</p>
  
  <p>The main idea I got from <a href="https://stackoverflow.com/questions/10666484/html-content-fit-in-uiwebview-without-zooming-out">another question</a> is to adjust the width of elments, something like:</p>
  
  <pre><code>@media screen and (max-width: 480px){
      *{
      max-width: 320px;
      }
  }
  </code></pre>
  
  <p>I also have the usual viewport meta tag:</p>
  
  <pre><code>&lt;meta name="viewport" content ="width=device-width"&gt;
  </code></pre>
  
  <p>This doesn't resize it perfectly as it looks like <a href="http://dl.dropbox.com/u/50941418/screen_shot_iphone.jpg" rel="nofollow noreferrer">this currently</a>. Here is the <a href="http://gallery.campaignmonitor.com/ViewEmail/r/204A1EB681D250A3/" rel="nofollow noreferrer">original</a> HTML.</p>
  
  <p>I was wondering what else I can do to achieve this goal? I don't want to get this right for just this HTML but other HTML pages too.</p>
  
  <p>Maybe a jQuery plugin already exists for this?</p>
  
  <p>I don't want to get this right just for this page, I want something more generic for any HTML page.</p>