Question

So, I have a simple app that loads an image board in a webview. Everything looks great on most versions of Android except ICS. First, the rendered page no longer fills the parent, instead filling about 80% of the viewport. Second, the images and text from posts on the page are wrapped into narrow columns filling about 45% of the width of the viewport.

I realize it could be an issue with how 4.0+ is reading the elements of this wakaba image board (xhtml), but I’ve hit a wall looking into that. Perhaps someone could explain what changed with ICS webviews to help me isolate the problem? Is this an issue with webkit?

xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
</LinearLayout>

src:

public void onCreate(Bundle savedInstanceState) {    
  super.onCreate(savedInstanceState);
  wv = new WebView(this);
  WebSettings webSettings = wv.getSettings();
  webSettings.setJavaScriptEnabled(true);
  webSettings.setUseWideViewPort(true);
  webSettings.setBuiltInZoomControls(true);
  webSettings.setMinimumFontSize(48);
  webSettings.setUseWideViewPort(true);
  webSettings.setLoadWithOverviewMode(true);
  webSettings.setDefaultZoom(WebSettings.ZoomDensity.FAR);
  setContentView(R.layout.main );
  getWindow().setFeatureInt( Window.FEATURE_PROGRESS, Window.PROGRESS_VISIBILITY_ON);
      wv.loadUrl("http://example.com");
      wv.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
  wv.setScrollbarFadingEnabled(true);
}

Example of html posts that are squished:

<span class="filesize">File: <a target="_blank" href="/b-/src/1329696064044.png">1329696064044.png</a> -(<em>1063442 B, 1433x1080</em>)</span> <span class="thumbnailmsg">Thumbnail displayed, click image for full size.</span><br />
<a target="_blank" href="/b-/src/1329696064044.png"> <img src="/b-/thumb/1329696064044s.jpg" width="500" height="376" alt="1063442" class="thumb" /></a>    <a name="2058"></a> 
<label><input type="checkbox" name="delete" value="2058" /> <span class="filetitle"></span>  <span class="postername">Anonymous</span> 02/19 17:01</label> <span class="reflink">
<a href="/b-/res/2058.html#i2058">No.2058</a>  </span>&nbsp; [<a href="/b-/res/2058.html">Reply</a>] <blockquote> <p>I&#39;m not saying he&#39;s real&#44; but he&#39;s real.<br />
<a href="http://www.youtube.com/watch?v=rkJZYxWAhUA&amp;feature=related" rel="nofollow">http://www.youtube.com/watch?v=rkJZYxWAhUA&amp;feature=related</a></p>  </blockquote>     <br clear="left" /><hr />

A preemptive thanks!

Answer 1

I’m getting this as well on ICS Webview, which seems to be very unpredictable.

What seemed to cause my narrow width problem was having both setUseWideViewPort(true) and setUseWideViewPort(true). So only have one of those and see if it solves the problem.