Cómo establecer el zoom / anchura inicial para una vista web

Question

Estoy intentando conseguir el WebView a tener un comportamiento similar a la del navegador de Android. El navegador abre todas las páginas de una manera que intenta adaptarse a su anchura a la pantalla. Sin embargo, el comportamiento por defecto de la vista Web es comenzar en una escala de píxeles 100% por lo que comienza el zoom en la esquina superior izquierda.

He pasado el último par de horas tratando de encontrar una manera de conseguir la vista Web para escalar la página a la pantalla como lo hace en el navegador, pero no estoy teniendo ninguna suerte. Alguien ha encontrado una manera de lograr esto?

que veo es un ajuste llamado setLoadWithOverviewMode, pero eso no parece hacer nada en absoluto. También he experimentado con setInitialScale pero en diferentes tamaños de pantalla y tamaños de página web que no será tan elegante como los navegadores de escala.

Cualquiera 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 que está cerca, pero todavía no se ajusta a toda la pantalla en la página. I A partir de este botín con la esperanza de que hay una manera más segura de obtener el tamaño inicial para ajustar la página al ancho de la página en cualquier tamaño o la orientación de la pantalla.

Answer 1

Las siguientes cargas de código de la versión de escritorio de la página principal de Google has totalmente fuera para encajar dentro del webview para mí en Android 2.2 en una pantalla de 854x480 píxeles. Cuando reorientar el dispositivo y se vuelven a cargar en retrato o paisaje, la página de anchura encaja totalmente 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();
        }
    }
}

Answer 2

me di cuenta de por qué el retrato de vista no estaba llenando por completo el visor. Por lo menos en mi caso, fue porque la barra de desplazamiento siempre estaba mostrando. 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.

Espero que esto ayude

Answer 3

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

La excelente respuesta publicado por Brian no está funcionando 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. Entonces setUseWideViewPort (true) se extiende la anchura contenido al máximo de la anchura vista web.

Answer 4

Trate utilizando una amplia ventana :

 webview.getSettings().setUseWideViewPort(true);

Answer 5

// 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 6

Estoy trabajando con la carga de imágenes para esta respuesta y yo quiero que sean escalados al ancho del dispositivo. Me parece que, para los teléfonos antiguos con versiones menos de 19 API (KitKat), el comportamiento de la respuesta de Brian no es bastante como me gusta. Se pone una gran cantidad de espacio en blanco alrededor de algunas imágenes en teléfonos antiguos, pero funciona en mi nueva. Aquí está mi alternativa, con la ayuda de esta respuesta: WebView de Can Android cambiar automáticamente el tamaño enormes imágenes? El algoritmo de diseño SINGLE_COLUMN está en desuso, pero funciona y siento que es apropiado para trabajar con webviews mayores.

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

Answer 7

Si usted tiene la vista web descubierto, pero sus imágenes todavía está fuera de escala, la mejor solución que encontré ( aquí ) fue simplemente anteponiendo el documento con:

<style>img{display: inline; height: auto; max-width: 100%;}</style>

Como resultado se escalan todas las imágenes para que coincida con el ancho vista web.