Estoy tratando de que WebView tenga un comportamiento similar al del navegador de Android. El navegador abre todas las páginas de una manera que intenta ajustar su ancho a la pantalla. Sin embargo, el comportamiento predeterminado de WebView es comenzar en una escala de píxeles del 100%, por lo que comienza con el zoom en la esquina superior izquierda.
He pasado las últimas horas tratando de encontrar una manera de que WebView escale la página a la pantalla como lo hace en el navegador, pero no estoy teniendo suerte. ¿Alguien ha encontrado una manera de lograr esto?
Veo que es una configuración llamada setLoadWithOverviewMode, pero eso no pareció hacer nada en absoluto. También experimenté con setInitialScale pero en diferentes tamaños de pantalla y tamaños de página web que no serán tan elegantes como el escalado de los navegadores.
¿Alguien tiene alguna pista?
Gracias
EDITAR: El método de Brian parece funcionar cuando el teléfono está en horizontal pero no en vertical. En retrato, está cerca, pero aún no cabe toda la pantalla en la página. Empiezo esta recompensa con la esperanza de que haya una forma segura de conseguir el zoom inicial para ajustar la página al ancho de la página en cualquier orientación o tamaño de pantalla.
Respuestas:
El siguiente código carga la versión de escritorio de la página de inicio de Google completamente alejada para que quepa dentro de
webview
para mí en Android 2.2 en una pantalla de 854x480 píxeles. Cuando reoriento el dispositivo y se vuelve a cargar en vertical u horizontal, el ancho de la página encaja completamente dentro de la vista cada vez.BrowserLayout.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <WebView android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout>
Browser.java:
import android.app.Activity; import android.os.Bundle; import android.webkit.WebView; public class Browser extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.BrowserLayout); String loadUrl = "http://www.google.com/webhp?hl=en&output=html"; // initialize the browser object WebView browser = (WebView) findViewById(R.id.webview); browser.getSettings().setLoadWithOverviewMode(true); browser.getSettings().setUseWideViewPort(true); try { // load the url browser.loadUrl(loadUrl); } catch (Exception e) { e.printStackTrace(); } } }
fuente
Descubrí por qué la vista de retrato no llenaba totalmente la ventana. Al menos en mi caso, fue porque la barra de desplazamiento siempre se mostraba. Además del código de la ventana gráfica anterior, intente agregar esto:
browser.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY); browser.setScrollbarFadingEnabled(false);
Esto hace que la barra de desplazamiento no ocupe espacio de diseño y permite que la página web llene la ventana gráfica.
Espero que esto ayude
fuente
Es una vieja pregunta pero déjame agregar un detalle por si acaso llegan más personas como yo.
La excelente respuesta publicada por Brian no me funciona en Jelly Bean. Tengo que agregar también:
browser.setInitialScale(30);
El parámetro puede ser cualquier porcentaje que logre que el contenido redimensionado sea más pequeño que el ancho de la vista web. Luego, setUseWideViewPort (true) extiende el ancho del contenido al máximo del ancho de la vista web.
fuente
WebView.setInitialScale(int)
es 0, no 100. Enlace a la documentaciónIntente usar una ventana amplia :
webview.getSettings().setUseWideViewPort(true);
fuente
// para imágenes y videos swf, use el ancho como "100%" y la altura como "98%"
mWebView2.getSettings().setJavaScriptEnabled(true); mWebView2.getSettings().setLoadWithOverviewMode(true); mWebView2.getSettings().setUseWideViewPort(true); mWebView2.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY); mWebView2.setScrollbarFadingEnabled(true);
fuente
Estoy trabajando con la carga de imágenes para esta respuesta y quiero que se escalen al ancho del dispositivo. Encuentro que, para teléfonos más antiguos con versiones inferiores a API 19 (KitKat), el comportamiento de la respuesta de Brian no es el que me gusta. Pone mucho espacio en blanco alrededor de algunas imágenes en teléfonos más antiguos, pero funciona en el más nuevo. Aquí está mi alternativa, con la ayuda de esta respuesta: ¿Puede WebView de Android cambiar automáticamente el tamaño de imágenes enormes? El algoritmo de diseño
SINGLE_COLUMN
está obsoleto, pero funciona y creo que es apropiado para trabajar con vistas web más antiguas.WebSettings settings = webView.getSettings(); // Image set to width of device. (Must be done differently for API < 19 (kitkat)) if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) { if (!settings.getLayoutAlgorithm().equals(WebSettings.LayoutAlgorithm.SINGLE_COLUMN)) settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); } else { if (!settings.getLoadWithOverviewMode()) settings.setLoadWithOverviewMode(true); if (!settings.getUseWideViewPort()) settings.setUseWideViewPort(true); }
fuente
Si ha resuelto la vista web pero sus imágenes aún están fuera de escala, la mejor solución que encontré ( aquí ) fue simplemente anteponer el documento con:
<style>img{display: inline; height: auto; max-width: 100%;}</style>
Como resultado, todas las imágenes se escalan para que coincidan con el ancho de la vista web.
fuente
en Kotlin puedes usar,
webView.isScrollbarFadingEnabled = true webView.setInitialScale(100)
fuente