How to make text fit to screen (text-wrap) in WebView with KitKat

Question

I\'m having an issue in my WebView with Android 4.4. Before KitKat, text was fitting automatically with all devices resolutions in webviews. But today it\'s not fitting automati

Answer 1

It looks like this is using NARROW_COLUMNS. This was deprecated in KitKat.

However, a new layout algorithm was added which might be able to fix this, there is an example here: https://github.com/GoogleChrome/chromium-webview-samples

The main code is:

// Use WideViewport and Zoom out if there is no viewport defined
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);

settings.setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING);

The other option is to enable pinch zoom:

// Enable pinch to zoom without the zoom buttons
settings.setBuiltInZoomControls(true);

if(Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB) {
    // Hide the zoom controls for HONEYCOMB+
    settings.setDisplayZoomControls(false);
}

The new layout algorithm may not solve all the problems and it's not clear how to reliably mimic the old wrapping behavior.

The majority of the objections seem like general browser issues of displaying desktop sites on mobile. They liked the old way, but I have not seen a single other browser do what the text-wrapping algorithm was doing.

Answer 2

If you can edit the html (using a simple string replace for instance), add the style word-wrap: break-word to the text container html element. e.g: If the top level element inside the body of the html is <p>, change to<p style="word-wrap: break-word;">. The webview will then wrap around the text and fit to screen.