title: Why do Android and iOS browser render site wider than the device screen width by default?
body: <p>I have used the following code in my site to prevent the Android browser from rendering it wider than the screen resolution. It's code that I found on this site but while preparing to ask this question I was unable to find the original question again for reference. </p>
  
  <pre><code>&lt;meta name="HandheldFriendly" content="true" /&gt;
  &lt;meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" /&gt;
  </code></pre>
  
  <p>To start with, this code worked. The browser was originally rendering the page to be about three time as wide as the screen resolution, and Opera Mini did the same. After inserting these two lines into my <code>&lt;head&gt;</code>, the problem went away and the page was rendered as it should be. I remember from the answer that provided this code that this abnormal width was caused by the WebKit rendering engine that powered, among others, the Android and iOS browsers.</p>
  
  <p><strong>Question</strong>: Does anyone know why WebKit overrides the screen resolution and renders the page at a resolution greater than can be accommodated on the screen?</p>