Visualizzazione web Android: la pagina web dovrebbe adattarsi allo schermo del dispositivo

Ho provato quanto segue per adattare la pagina Web in base alle dimensioni dello schermo del dispositivo.

mWebview.setInitialScale(30);

e quindi impostare la visualizzazione dei metadati

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

Ma non funziona nulla, la pagina web non è fissata alle dimensioni dello schermo del dispositivo.

Qualcuno può dirmi come ottenerlo?

Devi calcolare la scala che devi usare manualmente, invece di impostare a 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();
}

Quindi usa

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

Puoi usarlo

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

questo risolve le dimensioni in base alle dimensioni dello schermo.

Amici,

Ho trovato da te molte informazioni importanti e ottime. Ma l'unico modo per me funziona era in questo modo:

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

Sto lavorando su Android 2.1 a causa del tipo di dispositivi dell'azienda. Ma ho risolto il mio problema utilizzando la parte delle informazioni di ciascuno.

Grazie!

Queste impostazioni hanno funzionato per me:

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

setInitialScale (1) mancava nei miei tentativi.

Sebbene la documentazione dica che 0 si ingrandirà completamente se setUseWideViewPort è impostato su true ma 0 non ha funzionato per me e ho dovuto impostare 1 .

Prova con questi suggerimenti HTML5

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

E con questo se la tua versione di Android è 2.1 o successiva

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

Tutto quello che devi fare è semplicemente

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

Questi funzionano per me e adattano il WebView alla larghezza dello schermo:

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

Grazie ai consigli di cui sopra e alla riga bianca nella visualizzazione Web di eclissi

Ho lo stesso problema quando uso questo codice

webview.setWebViewClient(new WebViewClient() {
}

quindi potrebbe essere necessario rimuoverlo nel codice
e ricordarsi di aggiungere 3 modalità di seguito per la visualizzazione web

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

questo risolve le dimensioni in base alle dimensioni dello schermo

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

Questo funziona alla grande per me poiché la dimensione del testo è stata impostata su molto piccola da .setLoadWithOverViewMode e .setUseWideViewPort.

Avevo il video in stringa html e la larghezza della visualizzazione web era maggiore della larghezza dello schermo e questo funziona per me.

Aggiungi queste righe alla stringa HTML.

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

Risultato dopo aver aggiunto il codice sopra alla stringa HTML:

<!DOCTYPE html>
<html>

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


</html>

In questo caso devi usare HTML nella tua webView. Ho risolto questo problema usando il seguente codice

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

Apportare modifiche alla risposta di danh32 a partire da display.getWidth (); è ora deprecato.

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

Quindi usa

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

Sembra un problema XML. Apri il documento XML contenente la tua visualizzazione Web. Elimina il codice di riempimento in alto.

Quindi nel layout, aggiungi

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

Nella visualizzazione Web, aggiungi

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

In questo modo la visualizzazione Web si adatta allo schermo del dispositivo.

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

funzionerà, ma ricorda di rimuovere qualcosa come:

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

se esisteva nel file html o cambia user-scalable = yes, altrimenti non lo farà.

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

Questo aiuterà a regolare l'emulatore in base alla pagina web:

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

È possibile impostare la scala iniziale in percentuale come mostrato sopra.

Il metodo getWidth dell'oggetto Display è deprecato. Eseguire l'override di onSizeChanged per ottenere la dimensione del WebView quando diventa disponibile.

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

In teoria la combinazione di:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); 

con

settings.setUseWideViewPort(false)

risolve il problema, avvolgendo il contenuto e adattandolo allo schermo. Ma NARROW_COLUMNS è stato deprecato. Ti consiglio di leggere questo thread di seguito che esplora il problema in dettaglio: https://code.google.com/p/android/issues/detail?id=62378

ecco una versione aggiornata, che non utilizza metodi deprecati, basata sulla risposta di @ 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;
    }
}

da utilizzare allo stesso modo:

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

Per riferimento, questa è un'implementazione Kotlin della soluzione di @ 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()
}

Nel mio caso, la larghezza è stata determinata da tre immagini per essere 300 pixel, quindi:

webview.setInitialScale(getWebviewScale(300))

Mi ci sono volute ore per trovare questo post. Grazie!

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