Elad Avron Elad Avron - 1 year ago 89
Android Question

No more Text Reflow after zoom in KitKat WebView

I have an app that relies heavily on WebViews.
After the KitKat update, users are reporting that the app no longer reflows text after zooming in or out.
I've looked into the documentation and saw that a lot has changed, but while it talks a lot about zooming and scaling, nothing there mentions anything about text reflow. It seems that once the viewport is set, zooming is a pan-and-zoom thing and there's no longer an option to have text reflow after zooming.
Is there ANY solution to this?

Answer Source

The KitKat Chromium WebView doesn't reflow text. If you're concerned about text legibility please see the "NARROW_COLUMNS and SINGLE_COLUMN no longer supported" section in the migration guide where the suggested solution is to use text autosizing.

If you really want to bring this effect back then you'd need to do something like this:

  1. Put all of your content in a <div id="contentRoot"> </div>
  2. Implement onScaleChanged

    class MyWebViewClient extends WebViewClient {
        boolean scaleChangedRunnablePending = false;
        // Other code here
        void onScaleChanged(final WebView webView, fload oldScale, float newScale) {
            if (scaleChangedRunnablePending) return;
            view.postDelayed(new Runnable() {
                public void run() {
                    webView.evaluateJavaScript("recalculateWidth();", null);
                    scaleChangedRunnablePending = false;
            }, 100);
    // Don't forget to webView.setWebViewClient(new MyWebViewClient());
  3. Use the following JavaScript

    function recalculateWidth() {

    or, alternatively you could try modifying the viewport meta tag.

The above should perform the reflow with a slight delay (which is there to keep the number of unnecessary re-layouts down to a minimum).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download