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?

5 Solutions collect form web for “No más Text Reflow después de ampliar KitKat WebView”

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 - Utilice OkHttp con Webview
  • Escalado de la vista de Android 4.1 (setInitialScale, meta-escala inicial no funciona)
  • Que muestra la imagen de sdcard con webview no funciona
  • WebView en Galería deteniendo eventos de desplazamiento / toque
  • sipml5 está funcionando bien para el cromo y el cromo de escritorio y Android, pero es de dos vías de audio no está funcionando en crosswalk y webview nativo
  • Android- PhoneGap / WebView ignora las metaetiquetas de la ventana de visualización?
  • Indicador de actividad de cliente de webview android
  • Android: muestra .mht o .mhtml en la vista Web en la aplicación
  • ¿Hay una manera de pasar un mensaje de un navegador de Android a una aplicación?
  • Android webview.loadUrl no cargará otra página web
  • Android: reducción de la calidad de los píxeles en las imágenes cargadas en WebView
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.