title: How do I make my mobile website auto-adjust its screen resolution?
body: <p>I'm working on a mobile website, but when I view the site on a phone, the website is automatically shrunk to a very small font and the user has to zoom in to read the text.</p>
  
  <p>How do I make it automatically display at the right size each time a user visits the site?</p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>.content {
  width:auto;
  height:auto;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#666666;
  text-align:justify;
  }
  </code></pre>
  
  <p>And my HTML:</p>
  
  <pre><code>&lt;div class="content"&gt; Hello
  &lt;div id="logo"&gt;&lt;img src="banner.png" border="0"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Despite my code, on Android and iPhone devices, the text appears very tiny. How do I fix this?</p>