Android Webview - Die Webseite sollte zum Gerätebildschirm passen

103

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?

SWDeveloper
quelle

Antworten:

82

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());
danh32
quelle
7
Vielen Dank für Ihre Antwort, ur richtig, es funktioniert. aber ich habe ein anderes Problem. Ich lade kein Bild, lade die Webseite in die Webansicht. So ermitteln Sie die Webseitenbreite (PIC_WIDTH).
SWDeveloper
1
Ah, ich habe diese Konstante dort drinnen vermisst. Das tut mir leid. Ich bin nicht sicher, wie Sie die Breite der tatsächlichen Webseite erhalten können.
Danh32
54
Was ist PIC_WIDTH hier?
Paresh Mayani
4
PIC_WIDTH war eine Konstante, die ich vorher kannte, da ich nur ein einzelnes Bild aus dem Assets-Ordner anzeigte. Wie ich oben sagte, weiß ich nicht, wie Sie die Breite der tatsächlichen Webseite erhalten können.
Danh32
1
@ MaheshwarLigade Ich benutze PIC_WIDTH = 360
Nicholas Ng
292

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.

Tushar Vengurlekar
quelle
4
Dadurch wird der Bildschirm angezeigt, Sie können jedoch nicht mehr vergrößern / verkleinern. Könnte dieses Problem verbessert werden? Ich weiß, dass es unter IOS möglich ist.
AlexAndro
1
Diese Einstellungen funktionieren für mich aber nur für die Breite, in den gleichen Fällen schneidet sie jetzt die Höhe ab
Albanx
1
Dies ist die beste Lösung, um dies zu erreichen, die ich bisher gefunden habe.
Fragon
1
Die Tatsache, dass die Lösung eingebaut ist, überzeugt mich wirklich.
Daniel Handojo
3
Fügen Sie zum Hinzufügen von Zoom Folgendes hinzu: webview.getSettings (). SetBuiltInZoomControls (true); webview.getSettings (). setDisplayZoomControls (false);
Andrew
34

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!

Josmar Peixe
quelle
Dann funktioniert das Zoomen nicht mehr. Ich bin der einzige mit diesem Problem?
Testen
@testing hast du eine Lösung dafür bekommen?
Anshul Tyagi
@AnshulTyagi: Nein, habe ich nicht. Da es für mich ein Testprojekt war, habe ich dies nicht weiter untersucht. Lassen Sie mich wissen, wenn Sie etwas finden!
Testen
@AnshulTyagi: Für Webseiten funktioniert dieser Ansatz für mich. Für Bilder muss ich etwas anderes verwenden ...
Testen
31

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 .

Doc
quelle
1
Ich habe die Anfangsskala nicht festgelegt, und es hat jahrelang für mich funktioniert. (Ich habe gerade den Übersichtsmodus und das Ansichtsfenster eingestellt). Aber ein neues Gerät, auf das ich gerade gestoßen bin, schien vergrößert zu werden, bis die Seite aktualisiert wurde. Das Einstellen der Anfangsskala hat dies für mich behoben.
Doomsknight
25

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);
josebetomex
quelle
2
Leider haben sie dies abgelehnt und diese Lösung schlug für mich auf dem Galaxy S5
2cupsOfTech am
15

Alles was Sie tun müssen, ist einfach

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

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

Nezneika
quelle
3
Es scheint, dass SINGLE_COLUMN jetzt veraltet ist. Developer.android.com/reference/android/webkit/…
Alexander Abramov
11

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

Linh
quelle
2
@shahzainali können Sie Ihre Webansicht zoomen?
Anshul Tyagi
@AnshulTyagi Nein, es zoomt nicht.
Shahzain Ali
6
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.

Steve
quelle
6

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>
Biljana Divljak
quelle
5

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);
Qadir Hussain
quelle
Ich denke, es ist besser, px ot vh anstelle von% zu verwenden. % in Iframes haben einige Fehler bei Orientierungsänderungen
Siarhei
4

Ä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());
Ducktales
quelle
Ich habe berechnet, dass die Skala <1 oder 100% sein sollte, also habe ich meine Breite mit der PIC_WIDTH verglichen, um das Verhältnis zu erhalten. Mehr als das habe ich auch etwas Polsterung abgezogen.
Abhinav Saxena
4

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.

ZakiHacky
quelle
Das spart mir Zeit.
Kabkee
2
fill_parent ist veraltet, benutze match_parent.
Trevor Hart
3
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.

Hoang Nguyen Huu
quelle
2
int PIC_WIDTH= webView.getRight()-webView.getLeft();
John
quelle
1
getRight und getLeft geben für mich immer 0 zurück
yrazlik
2

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.

Jagadeesh
quelle
2

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);
    }
};
SharkAlley
quelle
Wie kommen Sie WEB_PAGE_WIDTH?
Testen
Wenn Sie versuchen, Inhalte mit fester Breite an den Bildschirm anzupassen, sollten Sie im Voraus wissen, wie breit Ihre Inhalte sind. Ist das sinnvoll?
SharkAlley
OK, das sollte für Bilder funktionieren. Für Webseiten (die reagieren können) kann es beispielsweise eine beliebige Breite> 320px sein.
Testen
1

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

Alécio Carvalho
quelle
1

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

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!

Steven Smith
quelle
-4
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);
Ketan Ramani
quelle
Bitte posten Sie nicht zwei Antworten mit demselben Inhalt, nur weil die Stimmen nicht stimmen.
Techydesigner
Und bitte formatieren Sie Ihren Code mit ein wenig Aufwand! Warum hast du es so oft nach rechts eingerückt? Zu viel Zeit, um Leerzeichen zu löschen?
Massimiliano Kraus