No más Text Reflow después de ampliar KitKat WebView

Tengo una aplicación que depende en gran medida de WebViews. Después de la actualización de KitKat, los usuarios informan que la aplicación ya no recupera el texto después de acercarse o alejarse. He mirado en la documentación y he visto que mucho ha cambiado, pero mientras habla mucho sobre el zoom y la escala, nada allí menciona nada sobre el texto de reflujo. Parece que una vez que la ventana está establecida, el zoom es una cosa panorámica y zoom y ya no hay una opción para que el texto vuelva a subir tras el zoom. ¿Hay alguna solución para esto?

KitKat Chrome WebView no cambia el texto. Si le preocupa la legibilidad del texto, consulte la sección "NARROW_COLUMNS y SINGLE_COLUMN no más admitidas" en la guía de migración, donde la solución sugerida es utilizar el autosizing de texto.

Si realmente quieres traer este efecto de vuelta entonces tendrías que hacer algo como esto:

  1. Pon todo tu contenido en <div id="contentRoot"> </div>
  2. Implementar 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. Utilice el siguiente código JavaScript

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

    o, alternativamente, podría intentar modificar la metaetiqueta de viewport.

Lo anterior debe realizar el reflujo con un ligero retraso (que está ahí para mantener el número de re-layouts innecesarios a un mínimo).

Gracias a todos, por este gran hilo !! Quiero añadir mis 2cents. No hay necesidad de añadir div adicional con id = 'contentRoot' en el archivo HTML. Usted puede utilizar la etiqueta del cuerpo que debe existir ya en cualquier html. Además, como escribió EladAvron, el código JS puede ser llamado directamente desde Java. En general, la respuesta original que marcin.kosiba ha publicado es aplicable a HTML que no tiene derecho a modificar.

La llamada a JS que trabajó para mí es:

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

No sé por qué, pero agregar 'px' fue crucial para mí.

Gracias por estas sugerencias – combinándolas, he encontrado la siguiente solución que no necesita Java:

 var innerWidth = 0; var text_reflow = function () { if (window.innerWidth != innerWidth) { innerWidth = window.innerWidth; document.getElementsByTagName('body')[0].style.width = innerWidth+'px'; } }; text_reflow(); setInterval(text_reflow, 500); 

En lugar de usar el intervalo de sondeo, uno podría hacer, por ejemplo, también

 window.onresize = text_reflow; addListener(window, 'touchstart', function (e) { text_reflow(); }); 

Desafortunadamente, parece que no se pueden capturar los eventos reales de pinch-to-zoom.

Este es un hilo antiguo, pero sólo quería añadir la solución que estoy usando, en caso de que alguien pueda beneficiarse de ella. He experimentado el extraño problema de escala en ciertas páginas cuando se amplió todo el camino, y por desgracia, es difícil de detectar en JavaScript si la página se amplía todo el camino. La solución a esto es detectar si el cambio de escala es lo suficientemente grande antes de cambiar el tamaño de la página.

La solución siguiente funciona en KitKat y Lollipop y no tiene el enfadado alejamiento gradual que estaba viendo en algunos sitios web.

 class MyWebViewClient extends WebViewClient { private boolean mIsRunning = false; private float mZoomScale = 0.0f; private static final String REFLOW_TEXT = "javascript:document.getElementsByTagName('body')[0].style.width=window.innerWidth+'px';" @Override public void onScaleChanged(final WebView view, final float oldScale, final float newScale) { if (view.isShown() && Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { if (mIsRunning) // Don't run if there's a resize runnable in the queue return; if (Math.abs(mZoomScale - newScale) > 0.01f) { // This stops the gradual zoom mIsRunning = view.postDelayed(new Runnable() { @Override public void run() { mZoomScale = newScale; view.evaluateJavascript(REFLOW_TEXT, null); mIsRunning = false; } }, 100); } } } } 

Gracias a marcin.kosiba y user3185518, cuyas soluciones combiné y modificó para construir esta respuesta.

Este código se asegurará de resolver su problema 100% El problema con el KitKat Viene en forma de cabeza fina

<meta name="viewport" content="maximum-scale=0"> java> view.evaluateJavascript("document.getElementsByTagName('head')[0].appendChild('<meta name=\"viewport\" content=\"maximum-scale=0\">');", null);

 webView.setWebViewClient(new WebViewClient() { boolean scaleChangedRunnablePending = false; @Override public void onScaleChanged(final WebView view, float oldScale, float newScale) { super.onScaleChanged(view, oldScale, newScale); if (scaleChangedRunnablePending) return; view.postDelayed(new Runnable() { @Override public void run() { view.evaluateJavascript("document.getElementsByTagName('head')[0].appendChild('<meta name=\"viewport\" content=\"maximum-scale=0\">');", null); scaleChangedRunnablePending = false; } }, 100); } 
  • Android WebView parece ignorar la información de "vista gráfica" en las páginas web
  • Android - Multiple onReceivedHttpAuthRequest con WebView
  • Teclado suave de Android no panorámico vista web
  • Cuando invoco una función Java desde mi código Javascript, WebView se bloquea. ¿Por qué?
  • Cómo grabar la pantalla de actividad de la webview con Android MediaCodec?
  • ¿Cómo anular algunos eventos de gestos en una webview, pero dejar que otros a través de?
  • Interceptar solicitudes POST en un WebView
  • OnPageFinished () nunca llamado (webview)!
  • Android Load Cache Only no funciona. Mostrar WebView fuera de línea
  • Comunicación entre webview y código nativo en una aplicación para móviles
  • Cómo interceptar datos POST en una vista web de android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.