Cómo configurar el zoom/ancho inicial para una vista web

Question

Estoy intentando que el WebView tenga un comportamiento similar al del navegador 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 100% de píxeles, por lo que comienza con el zoom en la esquina superior izquierda.

He pasado las últimas dos horas tratando de encontrar una manera de hacer que WebView amplíe 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 es una configuración llamada setLoadWithOverviewMode, pero parece que no hace nada. 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 la escala de los navegadores.

¿Alguien tiene alguna pista?

Gracias

EDIT: método de Brian parece que funciona cuando el teléfono en el paisaje, pero no en el retrato. En el retrato está cerca, pero todavía no se ajusta a toda la pantalla en la página. Empiezo esta recompensa con la esperanza de que haya una forma segura de lograr que el zoom inicial se ajuste a la página con el ancho de la página en cualquier orientación o tamaño de pantalla.

Answer 1

El siguiente código carga la versión de escritorio de la página principal de Google totalmente reducida a encajar dentro de la webview para mí en Android 2.2 en una pantalla de 854x480 píxeles. Cuando reorienta el dispositivo y se vuelve a cargar en vertical u horizontal, el ancho de la página se ajusta por completo a 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(); 
     } 
    } 
} 

Answer 2

Trate using a wide viewport:

webview.getSettings().setUseWideViewPort(true); 

Answer 3

// para imágenes y vídeos SWF utilice anchura 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); 

Answer 4

Descubrí por qué la vista de retrato no llenaba totalmente la ventana gráfica. Al menos en mi caso, fue porque la barra de desplazamiento siempre se mostraba. Además del código de vista anterior, trate de añadir esto:

browser.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY); 
    browser.setScrollbarFadingEnabled(false); 

Esto hace que la barra de desplazamiento para no ocupan espacio de diseño, y permite que la página web para llenar la ventana.

Esperanza esto ayuda

Answer 5

Es cuestión y viejo, pero permítanme añadir un detalle por si acaso más gente como yo llegue aquí.

La excelente respuesta publicada por Brian no funciona para mí en Jelly Bean. Tengo que añadir también:

browser.setInitialScale(30); 

El parámetro puede ser cualquier porcentaje tha logra que el contenido redimensionada es menor que la anchura vista web. Luego setUseWideViewPort (true) amplía el ancho del contenido al máximo del ancho de la vista web.

Answer 6

Estoy trabajando con la carga de imágenes para esta respuesta y quiero que se adapten al ancho del dispositivo. Me parece que, para los teléfonos más antiguos con versiones inferiores a API 19 (KitKat), el comportamiento de la respuesta de Brian no es exactamente como me gusta. Coloca muchos espacios en blanco alrededor de algunas imágenes en teléfonos más antiguos, pero funciona en mi versión más nueva. Aquí está mi alternativa, con la ayuda de esta respuesta: Can Android's WebView automatically resize huge images? El algoritmo de diseño SINGLE_COLUMN está en desuso, pero funciona y creo que es apropiado para trabajar con webviews anteriores.

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); 
}