title: Android WebView zoom in to match div width
body: <p>I need to display HTML formatted text in my Android app. I get HTML from the server. It looks something like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div style="width: 9em; background-color: #00FF00;"&gt;
      &lt;img src="smiley.png" /&gt;
      &lt;pre&gt;abc  123  456  789&lt;/pre&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I put this in WebView I get the following result (image):</p>
  
  <p><a href="http://s11.postimg.org/gu3a6ybpf/Screenshot_2014_09_12_17_08_25.png" rel="nofollow">http://s11.postimg.org/gu3a6ybpf/Screenshot_2014_09_12_17_08_25.png</a></p>
  
  <p>But I need to zoom in the WebView, so that the "div" (the green square) will match the screen from left to right. This is the result I am looking for (image):</p>
  
  <p><a href="http://s4.postimg.org/554ayxqot/Screenshot_2014_09_12_17_14_14.png" rel="nofollow">http://s4.postimg.org/554ayxqot/Screenshot_2014_09_12_17_14_14.png</a></p>
  
  <p>The result must look the same on all screen sizes (phones, tablets, ...) and all orientations (portrait, landscape).</p>
  
  <p>I have tried everything and checked plenty of forums, but didn't found the solution to my problem. Can somebody please tell me how to get the result I want.</p>
  
  <p>Thank you.</p>