放大KitKat WebView后不再有Text Reflow

Question

我有一个严重依赖WebViews的应用程序.在KitKat更新后,用户报告该应用在放大或缩小后不再重排文本.我查看了文档并发现很多内容已经发生了变化,但是虽然它有很多关于缩放和缩放的内容,但没有任何关于文本重排的内容.似乎一旦设置了视口,缩放就是一个全缩放的东西,并且不再有选项可以在缩放后重新进行文本重排.这有什么解决方案吗？

Answer 1

KitKat Chromium WebView不会重排文本.如果您担心文本易读性,请参阅迁移指南中的"不再支持NARROW_COLUMNS和SINGLE_COLUMN"部分,其中建议的解决方案是使用文本自动调整.

如果你真的想要带回这个效果那么你需要做这样的事情:

1. 将所有内容放入 <div id="contentRoot"> </div>

2. 实现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. 使用以下JavaScript

   function recalculateWidth() {
       $("#contentRoot").width(window.innerWidth);
   }
   

   或者,您也可以尝试修改视口元标记.

以上应该稍微延迟执行回流(这是为了将不必要的重新布局的数量减少到最小).

Answer 2

谢谢,大家,为这个伟大的线程!! 我想加我的2cents.无需在HTML文件中添加id ='contentRoot'的额外div.您可以使用必须已存在于任何html中的body标记.另外,正如EladAvron所写,JS代码可以直接从Java调用.总而言之,marcin.kosiba发布的原始答案适用于您无权修改的HTML.

对我有用的JS调用是:

webview.loadUrl("javascript:document.getElementsByTagName('body')[0].style.width=window.innerWidth+'px';");

我不知道为什么,但添加'px'对我来说至关重要.