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


76

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.


¿Encontraste una solución para esto?
Samuel

@Sam, sí, la solución aceptada a continuación funciona para mí.
cottonBallPaws

por alguna razón pasé un día entero alrededor de esto y funcionó solo en api7 y no arriba. Finalmente tuve que implementar lo mismo usando setInitialScale y calculando la escala inicial manualmente. Por cierto, tenía una sola imagen con dimensiones de 480x800.
Samuel

Trabajando para mí en todos los dispositivos en los que lo he probado, desde el nivel de API 7 hasta el 14.
cottonBallPaws

Respuestas:


159

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

Gracias Brian, eso parece estar funcionando a primera vista. Voy a probar muchos sitios más antes de recompensar la recompensa, ¡pero esto parece prometedor!
cottonBallPaws

Esta fue una gran explicación ex. +1
Tarik

no me funciona. Parece que el zoom se establece después de que se carga la página
jiduvah

Esto funcionó muy bien ... ¿cómo se le ocurren estas soluciones a la gente? Prueba y error, ¿o tienes algún tomo sagrado?
CloudMeta

6
Esta solución tampoco funcionó para mí. Obtengo mucho espacio en negro a la derecha y al final del contenido. Sin embargo, estoy cargando una imagen de la carpeta de activos en lugar de una página web. ¿Podría ser por eso?
SilithCrowe

20

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


12

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.


Mi página web que se muestra en la vista web consta de mucho Javascript, es más como OSD en TV, widgets con botones. Usé su solución y tengo 2 comentarios sobre eso: 1. La primera carga de la vista web no es exitosa, la vista web es negra 2. La segunda es correcta, pero puedo tocar dos veces y eso es algo que no quiero, porque escala los widgets y botones dejan de funcionar entonces. ¿Alguna ayuda que puedas brindar? Gracias.
MartinC

Cabe señalar que el valor predeterminado de WebView.setInitialScale(int)es 0, no 100. Enlace a la documentación
DBX12

Gracias, ayudó. Probé 5, 10, 30 y 70 por ciento. En el caso de 70, cambió el tamaño de una página grande al 70%, por lo que aparecieron barras de desplazamiento. En el caso de 5-30%, redimensionó la página normalmente.
CoolMind

7

Intente usar una ventana amplia :

 webview.getSettings().setUseWideViewPort(true);

1
Gracias, parece que va en la dirección correcta. Eso en sí mismo no pareció hacer nada, pero con la combinación de setInitialScale (50) funcionó perfectamente en retrato. Sin embargo, sosteniendo el teléfono en posición horizontal, no cabe en la pantalla. ¿Hay otras configuraciones que deba usar además de esa? Esto es lo que tengo actualmente: setBuiltInZoomControls (true), setUseWideViewPort (true), setInitialScale (50). Me gustaría que se adaptara bien a la pantalla sin importar el tamaño o la densidad de la pantalla. Gracias de nuevo.
cottonBallPaws

3

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


1

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

0

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.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.