webentwicklung-frage-antwort-db.com.de

Android Webview - Die Webseite sollte auf den Bildschirm des Geräts passen

Ich habe Folgendes versucht, um die Webseite an die 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, Webseite ist nicht auf die Bildschirmgröße des Geräts festgelegt.

Kann mir jemand sagen, wie ich das bekommen kann?

androidwebviewscalingandroid-webview
89
SWDeveloper

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

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());
78
danh32

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.

259
Tushar Vengurlekar

Freunde, 

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

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 von Geräten aus dem Unternehmen. Aber ich habe mein Problem mit dem Teil der Informationen aus jedem behoben.

Danke!

29
Josmar Peixe

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

Diese Einstellungen haben für mich funktioniert:

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

setInitialScale (1) fehlte bei meinen Versuchen.

Die Dokumentation besagt zwar, dass 0 ganz herausgezoomt wird, wenn setUseWideViewPort auf true gesetzt ist, aber 0 für mich nicht funktioniert hat und ich 1 gesetzt habe. .

22
Doc

Alles was Sie tun müssen, ist einfach

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
14
Muhammad Aamir Ali

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 und weiße Linie in der Eclipse-Webansicht

13
Nezneika

Ich habe das gleiche Problem, wenn ich diesen Code verwende

webview.setWebViewClient(new WebViewClient() {
}

möglicherweise sollten Sie es in Ihrem Code entfernen
Denken Sie daran, drei Modi für Ihren Webview 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

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

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

6
Steve

In diesem Fall müssen Sie HTML in Ihrem WebView verwenden. Ich habe das 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);
4
Qadir Hussain

Dies scheint ein XML-Problem zu sein. Öffnen Sie das XML-Dokument, das Ihre Web-View enthält. Löschen Sie den Auffüllcode oben. 

Dann im Layout hinzufügen

Android:layout_width="fill_parent"
Android:layout_height="fill_parent"

In der Web-Ansicht hinzufügen 

Android:layout_width="fill_parent"
Android:layout_height="fill_parent"

Dadurch passt sich die Web-Ansicht an den Bildschirm des Geräts an.

4
ZakiHacky

Ä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());
3
Ducktales

Ich hatte ein Video in HTML-String 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>
3
Biljana Divljak

Die getWidth-Methode des Anzeigeobjekts ist veraltet. Überschreiben Sie onSizeChanged, um die Größe des WebView zu ermitteln, sobald es 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);
    }
};
2
SharkAlley
webview.setInitialScale(1);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setJavaScriptEnabled(true);

funktioniert, aber vergessen Sie nicht, etwas zu entfernen:

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

wenn es in der HTML-Datei vorhanden ist, ändern Sie user-scalable = yes, andernfalls nicht.

2
Hoang Huu
int PIC_WIDTH= webView.getRight()-webView.getLeft();
2
john

Theoretisch die Kombination von:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);

mit 

settings.setUseWideViewPort(false)

behebt das Problem, packt den Inhalt und passt auf den Bildschirm. Das NARROW_COLUMNS wurde jedoch als veraltet eingestuft. Ich empfehle Ihnen, diesen Thread unten zu lesen, der das Problem ausführlich erläutert: https://code.google.com/p/Android/issues/detail?id=62378

1
Alécio Carvalho

Dies hilft bei der Anpassung des Emulators an die Webseite:

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

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

1
jagadeesh
  • setLoadWithOverviewMode(true) - Lädt das WebView vollständig herausgezoomt
  • Mit setUseWideViewPort(true) verfügt die Webansicht über ein normales Ansichtsfenster (z. B. einen normalen Desktop-Browser), während bei false das Ansichtsfenster auf seine eigenen Abmessungen beschränkt ist (wenn die Webansicht also 50 x 50 Pixel groß ist, ist das Ansichtsfenster dasselbe) Größe)

Lesen Sie mehr hier

Ich hatte eine Situation, in der ich kein Eigentümer von WebView war. Außerdem habe ich die Größe von WebView nach Abschluss der Seite geändert. Infolgedessen hatte ich einige Nebenwirkungen beim Zoomen. Meine Lösung lautet:

webView.post(new Runnable() {
    @Override
    public void run() {
        webView.getSettings().setLoadWithOverviewMode(true);
    }
});
0
yoAlex5

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);
0
Martin Zeitler