Vista web de Android: la página web debe ajustarse a la pantalla del dispositivo

He intentado lo siguiente para ajustar la página web según el tamaño de la pantalla del dispositivo.

mWebview.setInitialScale(30);

y luego configura la ventana gráfica de metadatos

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
<meta name="viewport" content="width=device-width, target-densityDpi=medium-dpi"/>

Pero nada funciona, la página web no está fijada al tamaño de la pantalla del dispositivo.

¿Alguien puede decirme cómo conseguir esto?

Debe calcular la escala que debe usar manualmente, en lugar de establecerla en 30.

private int getScale(){
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    int width = display.getWidth(); 
    Double val = new Double(width)/new Double(PIC_WIDTH);
    val = val * 100d;
    return val.intValue();
}

Entonces usa

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());

Puedes usar esto

    WebView browser = (WebView) findViewById(R.id.webview);
    browser.getSettings().setLoadWithOverviewMode(true);
    browser.getSettings().setUseWideViewPort(true);

esto corrige el tamaño según el tamaño de la pantalla.

Amigos,

Encontré mucha información importante y excelente de usted. Pero, la única forma en que funciona para mí fue de esta manera:

webView = (WebView) findViewById(R.id.noticiasWebView);
webView.setInitialScale(1);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setScrollbarFadingEnabled(false);
webView.loadUrl("http://www.resource.com.br/");

Estoy trabajando en Android 2.1 por el tipo de dispositivos de la empresa. Pero arreglé mi problema usando la parte de información de cada uno.

¡Gracias!

Estas configuraciones funcionaron para mí:

wv.setInitialScale(1);
wv.getSettings().setLoadWithOverviewMode(true);
wv.getSettings().setUseWideViewPort(true);
wv.getSettings().setJavaScriptEnabled(true);

setInitialScale (1) faltaba en mis intentos.

Aunque la documentación dice que 0 se alejará por completo si setUseWideViewPort se establece en verdadero, pero 0 no funcionó para mí y tuve que establecer 1 .

Prueba con estos consejos de HTML5

http://www.html5rocks.com/en/mobile/mobifying.html

Y con esto si tu versión de Android es 2.1 o superior

  WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

Todo lo que necesitas hacer es simplemente

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

Estos funcionan para mí y ajustan el WebView al ancho de la pantalla:

// get from xml, with all size set "fill_parent"  
webView = (WebView) findViewById(R.id.webview_in_layout);  
// fit the width of screen
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 
// remove a weird white line on the right size
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);  

Gracias por encima de los avisos y la línea blanca en la vista web de eclipse

Tengo el mismo problema cuando uso este código

webview.setWebViewClient(new WebViewClient() {
}

por lo que puede ser que deba eliminarlo en su código
y recuerde agregar 3 modos a continuación para su vista web

    webview.getSettings().setJavaScriptEnabled(true);  
    webview.getSettings().setLoadWithOverviewMode(true);
    webview.getSettings().setUseWideViewPort(true);

esto corrige el tamaño según el tamaño de la pantalla

WebView browser = (WebView) findViewById(R.id.webview);
browser.getSettings().setLoadWithOverviewMode(true);
browser.getSettings().setUseWideViewPort(true);
browser.getSettings().setMinimumFontSize(40);

Esto funciona muy bien para mí ya que el tamaño del texto se ha establecido en muy pequeño por .setLoadWithOverViewMode y .setUseWideViewPort.

Tenía un video en una cadena html y el ancho de la vista web era mayor que el ancho de la pantalla y esto me funciona.

Agregue estas líneas a la cadena HTML.

<head>
<meta name="viewport" content="width=device-width">
</head>

Resultado después de agregar el código anterior a la cadena HTML:

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width">
</head>


</html>

Tienes que usar HTML en tu webView en este caso. Resolví esto usando el siguiente código

webView.loadDataWithBaseURL(null,
                "<!DOCTYPE html><html><body style = \"text-align:center\"><img src= "
                        + \"http://www.koenvangorp.be/photos/2005_09_16-moon_2000.jpg\"
                        + " alt=\"pageNo\" width=\"100%\"></body></html>",
                "text/html", "UTF-8", null);

Realización de cambios en la respuesta de danh32 desde display.getWidth (); ahora está en desuso.

private int getScale(){
    Point p = new Point();
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    display.getSize(p);
    int width = p.x; 
    Double val = new Double(width)/new Double(PIC_WIDTH);
    val = val * 100d;
    return val.intValue();
}

Entonces usa

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());

Esto parece un problema de XML. Abra el documento XML que contiene su Web-View. Elimina el código de relleno en la parte superior.

Luego, en el diseño, agregue

android:layout_width="fill_parent"
android:layout_height="fill_parent"

En la vista web, agregue

android:layout_width="fill_parent"
android:layout_height="fill_parent" 

Esto hace que Web-View se ajuste a la pantalla del dispositivo.

webview.setInitialScale(1);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setJavaScriptEnabled(true);

funcionará, pero recuerde eliminar algo como:

<meta name="viewport" content="user-scalable=no"/>

si existía en el archivo html o cambia user-scalable = yes, de lo contrario no lo hará.

int PIC_WIDTH= webView.getRight()-webView.getLeft();

Esto ayudará a ajustar el emulador de acuerdo con la página web:

WebView wb;
//CALL THIS METHOD
wb.setInitialScale(50);

Puede establecer la escala inicial en porcentaje como se muestra arriba.

El método getWidth del objeto Display está en desuso. Anule onSizeChanged para obtener el tamaño de WebView cuando esté disponible.

WebView webView = new WebView(context) {

    @Override
    protected void onSizeChanged(int w, int h, int ow, int oh) {

        // if width is zero, this method will be called again
        if (w != 0) {

            Double scale = Double.valueOf(w) / Double.valueOf(WEB_PAGE_WIDTH);

            scale *= 100d;

            setInitialScale(scale.intValue());
        }

        super.onSizeChanged(w, h, ow, oh);
    }
};

En teoría, la combinación de:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); 

con

settings.setUseWideViewPort(false)

soluciona el problema, envolviendo el contenido y ajustándolo a la pantalla. Pero NARROW_COLUMNS ha quedado obsoleto. Le aconsejo que lea este hilo a continuación que explora el problema en detalle: https://code.google.com/p/android/issues/detail?id=62378

aquí hay una versión actualizada, que no usa métodos obsoletos, basada en la respuesta de @ danh32:

protected int getScale(Double contentWidth) {
    if(this.getActivity() != null) {
        DisplayMetrics displaymetrics = new DisplayMetrics();
        this.getActivity().getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        Double val = displaymetrics.widthPixels / contentWidth * 100d;
        return val.intValue();
    } else {
        return 100;
    }
}

para ser utilizado por igual:

int initialScale = this.getScale(420d);
this.mWebView.setInitialScale(initialScale);

Como referencia, esta es una implementación de Kotlin de la solución de @ danh32:

private fun getWebviewScale (contentWidth : Int) : Int {
    val dm = DisplayMetrics()
    windowManager.defaultDisplay.getRealMetrics(dm)
    val pixWidth = dm.widthPixels;
    return (pixWidth.toFloat()/contentWidth.toFloat() * 100F)
             .toInt()
}

En mi caso, tres imágenes determinaron que el ancho era de 300 pix, así que:

webview.setInitialScale(getWebviewScale(300))

Me tomó horas encontrar esta publicación. ¡Gracias!

WebView webView = (WebView)findViewById(R.id.web_view);
webView.setInitialScale((int) getResources().getDimension(R.dimen._50sdp)); // getActivity(). if you are at Fragment
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.loadDataWithBaseURL(null,here comes html content,"text/html","UTF-8", null);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDisplayZoomControls(true);
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);