Android Webview - Die Webseite sollte zum Gerätebildschirm passen

Ich habe Folgendes versucht, um die Webseite basierend auf der Bildschirmgröße des Geräts anzupassen.

mWebview.setInitialScale(30);

und legen Sie dann das Metadaten-Ansichtsfenster fest

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

Aber nichts funktioniert, die Webseite ist nicht auf die Bildschirmgröße des Geräts festgelegt.

Kann mir jemand sagen, wie ich das bekomme?

Sie müssen die Skala berechnen, die Sie manuell verwenden müssen, anstatt sie auf 30 zu setzen.

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

Dann benutze

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

Sie können dies verwenden

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

Dadurch wird die Größe basierend auf der Bildschirmgröße festgelegt.

Freunde,

Ich habe viel Import und tolle Informationen von Ihnen gefunden. Aber der einzige Weg, der für mich funktioniert, war folgender:

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

Ich arbeite an Android 2.1 wegen der Art der Geräte von der Firma. Aber ich habe mein Problem mit dem Teil der Informationen von jedem behoben.

Danke!

Diese Einstellungen haben bei mir funktioniert:

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

setInitialScale (1) fehlte bei meinen Versuchen.

Obwohl die Dokumentation besagt, dass 0 ganz herauszoomen wird , wenn setUseWideViewPort auf true gesetzt ist, aber 0 für mich nicht funktioniert hat und ich 1 setzen musste .

Versuchen Sie es mit diesen HTML5-Tipps

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

Und damit, wenn Ihre Android-Version 2.1 oder höher ist

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

Alles was Sie tun müssen, ist einfach

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

Diese funktionieren für mich und passen das WebView an die Bildschirmbreite an:

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

Vielen Dank oben Ratschläge und weiße Linie in der Eclipse-Webansicht

Ich habe das gleiche Problem, wenn ich diesen Code verwende

webview.setWebViewClient(new WebViewClient() {
}

Vielleicht sollten Sie es in Ihrem Code entfernen
und daran denken, unten 3 Modi für Ihre Webansicht hinzuzufügen

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

Dadurch wird die Größe basierend auf der Bildschirmgröße festgelegt

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

Dies funktioniert hervorragend für mich, da die Textgröße von .setLoadWithOverViewMode und .setUseWideViewPort auf sehr klein eingestellt wurde.

Ich hatte ein Video in einer HTML-Zeichenfolge und die Breite der Webansicht war größer als die Bildschirmbreite, und das funktioniert für mich.

Fügen Sie diese Zeilen zur HTML-Zeichenfolge hinzu.

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

Ergebnis nach dem Hinzufügen des obigen Codes zur HTML-Zeichenfolge:

<!DOCTYPE html>
<html>

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


</html>

In diesem Fall müssen Sie HTML in Ihrer WebView verwenden. Ich habe dies mit folgendem Code gelöst

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

Änderungen an der Antwort von danh32 seit dem display.getWidth () vornehmen; ist jetzt veraltet.

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

Dann benutze

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

Dies scheint ein XML-Problem zu sein. Öffnen Sie das XML-Dokument mit Ihrer Webansicht. Löschen Sie den Füllcode oben.

Fügen Sie dann im Layout hinzu

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

Fügen Sie in der Webansicht hinzu

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

Dadurch passt die Webansicht zum Gerätebildschirm.

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

wird funktionieren, aber denken Sie daran, etwas zu entfernen wie:

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

Wenn in der HTML-Datei vorhanden oder Benutzer skalierbar ändern = Ja, sonst nicht.

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

Dies hilft beim Anpassen des Emulators entsprechend der Webseite:

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

Sie können die Anfangsskala wie oben gezeigt in Prozent einstellen.

Die getWidth-Methode des Display-Objekts ist veraltet. Überschreiben Sie onSizeChanged, um die Größe der WebView zu ermitteln, sobald diese verfügbar ist.

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

Theoretisch ist die Kombination von:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); 

mit

settings.setUseWideViewPort(false)

behebt das Problem, verpackt den Inhalt und passt ihn an den Bildschirm an. Aber die NARROW_COLUMNS ist veraltet. Ich empfehle Ihnen, diesen Thread unten zu lesen, in dem das Problem ausführlich untersucht wird: https://code.google.com/p/android/issues/detail?id=62378

Hier ist eine aktualisierte Version, die keine veralteten Methoden verwendet, basierend auf der Antwort von @ 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;
    }
}

gleichermaßen verwendet werden:

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

Als Referenz ist dies eine Kotlin-Implementierung der @ danh32-Lösung:

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

In meinem Fall wurde die Breite durch drei Bilder zu 300 Pixel bestimmt, also:

webview.setInitialScale(getWebviewScale(300))

Ich habe Stunden gebraucht, um diesen Beitrag zu finden. Vielen Dank!

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