title: How to make html content in a WebView fit the width of the screen?
body: <p>I'm trying to display some html content (received from a a web service so I have no control on it) in a <code>WebView</code> and I cannot get it to fit the width of the screen, with no horizontal scrolling (normal text size and images wider than the screen resized to fit the screen width).</p>
  
  <p>The image is quite large: 1000 x 1000px.</p>
  
  <p>I have <code>minSdkVersion 15</code> and <code>targetSdkVersion 19</code> and testing on Nexus 4 with 4.4.4.</p>
  
  <p>How can I achieve that? Below is everything I've tried from solutions found on the internet.</p>
  
  <pre><code>String html = "&lt;p&gt;&lt;b&gt;bla bla bla&gt; ... &lt;p&gt;&lt;figure class=\"module images
      non-editable full\"&gt;&lt;img class=\"full\" title=\"Image title\"
      src=\"\/assets\/theimage.jpg\" alt=\"bla bla \"&gt;
      &lt;figcaption&gt;bla bla&lt;\/figcaption&gt;&lt;\/figure&gt;&lt;\/p&gt;";
  
  WebView webview = (WebView) getView().findViewById(R.id.webview);
  webview.getSettings().setJavaScriptEnabled(true);
  </code></pre>
  
  <p><b>test 1</b></p>
  
  <pre><code>webview.loadDataWithBaseURL(Config.URL_ROOT, html, "text/html", "utf-8", null);
  </code></pre>
  
  <p>The text size is ok, but the image is not resized and I have to scroll horizontally to see it all.</p>
  
  <p><b>test 2</b></p>
  
  <pre><code>webview.getSettings().setUseWideViewPort(true);
  webview.loadDataWithBaseURL(Config.URL_ROOT, html, "text/html", "utf-8", null);
  </code></pre>
  
  <p>Same as test 1.</p>
  
  <p><b>test 3</b></p>
  
  <pre><code>webview.getSettings().setLoadWithOverviewMode(true);
  webview.loadDataWithBaseURL(Config.URL_ROOT, html, "text/html", "utf-8", null);
  </code></pre>
  
  <p>Same as test 1.</p>
  
  <p><b>test 4</b></p>
  
  <pre><code>webview.getSettings().setLoadWithOverviewMode(true);
  webview.getSettings().setUseWideViewPort(true);
  webview.loadDataWithBaseURL(Config.URL_ROOT, html, "text/html", "utf-8", null);
  </code></pre>
  
  <p>Tiny text, image less wide than in test 1, but still wider than the screen.</p>
  
  <p><b>test 5</b></p>
  
  <pre><code>html = "&lt;!DOCTYPE html&gt;" +
              "&lt;html&gt;" +
              "&lt;head&gt;" +
              "&lt;meta name='viewport' content='width=device-width, user-scalable=no'/&gt;" +
              "&lt;title&gt;Viewport Test&lt;/title&gt;" +
              "&lt;/head&gt;" +
              "&lt;body style=\"margin: 0px;\"&gt;" +
              "&lt;div&gt;" +
              html +
              "&lt;/div&gt;" +
              "&lt;/body&gt;" +
              "&lt;/html&gt;";
  
  webview.getSettings().setUseWideViewPort(true);
  webview.loadDataWithBaseURL(Config.URL_ROOT, html, "text/html", "utf-8", null);
  </code></pre>
  
  <p>Same as test 1, though according to the <a href="http://developer.android.com/guide/webapps/targeting.html#Viewport" rel="nofollow">doc</a>:</p>
  
  <pre><code>"(this) &lt;meta&gt; tag specifies that the viewport width should exactly match the
  device screen's width and that the ability to zoom should be disabled"
  </code></pre>