Sometimes, when I load my page (no static content, constructed on the fly) I see the font size too small 1. If I reload I see it properly 2. I go back and forth and see it properly. And then … small. Not a specific page, not on specific times. Not even specific version: I deploy on ICS device, no problem, then change something (like the font-size) and here is the problem. Same for deploys at 8 and 10 emulators.
My view is pretty straightforward:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<WebView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webviewArticle"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="12dp" >
</WebView>
</LinearLayout>
The HTML construction (the content parameter is formatted html)
String toShow = new StringBuffer()
.append("<html>")
.append("<head>")
.append("<style type='text/css'>body{ font-size: large; color: #FFFFFF; background-color: #000000;}</style>")
.append("</head>")
.append(String.format(
"<body><h1>%s</h1><div><img src='%s' alt='%s' style='width:100%%; height:auto' /></div><div style='background-color:#000000;'>%s</div><div><h3>%s</h3></div></body>",
article.getTitle(),
article.getImageLink().toString(),
article.getTitle(),
article.getContent().replace("%", "%25"), //html
article.getAuthor()))
.append("</html>")
.toString();
mBrowser.getSettings().setBuiltInZoomControls(true);
mBrowser.setInitialScale(1);
CompatibilityUtils.setLoadWithOverviewMode(mBrowser, true); //set based on android version
mBrowser.getSettings().setUseWideViewPort(true);
mBrowser.loadDataWithBaseURL("fake://in/order/to/refresh", toShow, "text/html", "utf-8",null);
Any hint?
Additional description 12/09/25: as the images suggest, the WebView thinks that the available space is half the screen and lays the text accordingly. This is is odd. What is oddest is that it thinks so for the text (the header above the image and the div below) and not the image!!!
this
or