No more Text Reflow after zoom in KitKat WebView

Question

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 1

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
   
       @Override
       void onScaleChanged(final WebView webView, fload oldScale, float newScale) {
           if (scaleChangedRunnablePending) return;
           view.postDelayed(new Runnable() {
               @Override
               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() {
       $("#contentRoot").width(window.innerWidth);
   }
   

   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).