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> [<a href="/b-/res/2058.html">Reply</a>] <blockquote> <p>I'm not saying he's real, but he's real.<br />
<a href="http://www.youtube.com/watch?v=rkJZYxWAhUA&feature=related" rel="nofollow">http://www.youtube.com/watch?v=rkJZYxWAhUA&feature=related</a></p> </blockquote> <br clear="left" /><hr />
A preemptive thanks!
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.