webentwicklung-frage-antwort-db.com.de

So stellen Sie den anfänglichen Zoom / die Breite für eine Webansicht ein

Ich versuche, das WebView auf ein ähnliches Verhalten wie den Android Browser einzustellen. Der Browser öffnet alle Seiten auf eine Weise, die versucht, ihre Breite an den Bildschirm anzupassen WebView soll mit einer 100% -Pixel-Skala beginnen, damit es in der oberen linken Ecke vergrößert wird.

Ich habe die letzten paar Stunden damit verbracht, eine Möglichkeit zu finden, mit der WebView die Seite wie im Browser auf den Bildschirm skaliert werden kann, aber ich habe kein Glück. Hat jemand einen Weg gefunden, dies zu erreichen?

Ich sehe, ist eine Einstellung namens setLoadWithOverviewMode, aber das schien überhaupt nichts zu tun. Ich habe auch mit setInitialScale experimentiert, aber mit verschiedenen Bildschirm- und Webseitengrößen, die nicht so elegant sind wie die Skalierung des Browsers.

Hat jemand irgendwelche Hinweise?

Vielen Dank

EDIT: Brians Methode scheint zu funktionieren, wenn das Telefon im Querformat aber nicht im Hochformat ist. Im Hochformat ist es nah, passt aber immer noch nicht auf den gesamten Bildschirm der Seite. Ich beginne dieses Kopfgeld mit der Hoffnung, dass es einen sicheren Weg gibt, den anfänglichen Zoom so einzustellen, dass die Seite in jeder Ausrichtung oder Bildschirmgröße an die Breite der Seite angepasst wird.

73
cottonBallPaws

Mit dem folgenden Code wird die Desktop-Version der Google-Startseite vollständig verkleinert, sodass sie in das webview für mich in Android 2.2 auf einem Bildschirm mit 854 x 480 Pixel passt. Wenn ich das Gerät neu ausrichte und es wird im Hoch- oder Querformat neu geladen, die Seitenbreite passt jedes Mal vollständig in die Ansicht.

BrowserLayout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:orientation="vertical"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent">

     <WebView Android:id="@+id/webview"
         Android:layout_width="fill_parent"
         Android:layout_height="fill_parent" />
</LinearLayout>

Browser.Java:

import Android.app.Activity;
import Android.os.Bundle;
import Android.webkit.WebView;

public class Browser extends Activity {

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.BrowserLayout);

        String loadUrl = "http://www.google.com/webhp?hl=en&output=html";

        // initialize the browser object
        WebView browser = (WebView) findViewById(R.id.webview);

        browser.getSettings().setLoadWithOverviewMode(true);
        browser.getSettings().setUseWideViewPort(true);

        try {
            // load the url
            browser.loadUrl(loadUrl);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
155
Brian

Ich fand heraus, warum die Porträtansicht das Ansichtsfenster nicht vollständig ausfüllte. Zumindest in meinem Fall, weil die Bildlaufleiste immer angezeigt wurde. Versuchen Sie zusätzlich zum obigen Code für das Ansichtsfenster Folgendes hinzuzufügen:

    browser.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
    browser.setScrollbarFadingEnabled(false);

Dadurch nimmt die Bildlaufleiste keinen Platz im Layout ein und die Webseite kann das Ansichtsfenster ausfüllen.

Hoffe das hilft

20
Dean

Es ist eine alte Frage, aber lassen Sie mich ein Detail hinzufügen, falls mehr Leute wie ich hier ankommen.

Die ausgezeichnete Antwort von Brian funktioniert bei mir in Jelly Bean nicht. Ich muss auch hinzufügen:

browser.setInitialScale(30);

Der Parameter kann ein beliebiger Prozentsatz sein, der bewirkt, dass die Größe des Inhalts kleiner als die Breite der Webansicht ist. Dann erweitert setUseWideViewPort (true) die Inhaltsbreite auf das Maximum der Breite der Webansicht.

13
Ivan BASART

Versuchen Sie mit einem breiten Ansichtsfenster :

 webview.getSettings().setUseWideViewPort(true);
7
Brian

// Für Bilder und SWF-Videos Breite als "100%" und Höhe als "98%" verwenden

mWebView2.getSettings().setJavaScriptEnabled(true);
mWebView2.getSettings().setLoadWithOverviewMode(true);
mWebView2.getSettings().setUseWideViewPort(true);
mWebView2.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView2.setScrollbarFadingEnabled(true);
3
Ashish Anand

Ich arbeite daran, Bilder für diese Antwort zu laden und möchte, dass sie auf die Breite des Geräts skaliert werden. Ich finde, dass bei älteren Telefonen mit Versionen unter API 19 (KitKat) das Verhalten für Brians Antwort nicht ganz so ist, wie ich es mag. Auf älteren Telefonen werden einige Bilder mit Leerzeichen versehen, auf meinem neueren funktioniert dies jedoch. Hier ist meine Alternative, mit Hilfe dieser Antwort: Kann Android's WebView die Größe großer Bilder automatisch ändern? Der Layout-Algorithmus SINGLE_COLUMN ist veraltet, aber es funktioniert und ich halte es für angemessen, mit älteren Webviews zu arbeiten.

WebSettings settings = webView.getSettings();

// Image set to width of device. (Must be done differently for API < 19 (KitKat))
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KitKat) {
    if (!settings.getLayoutAlgorithm().equals(WebSettings.LayoutAlgorithm.SINGLE_COLUMN))
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
} else {
    if (!settings.getLoadWithOverviewMode()) settings.setLoadWithOverviewMode(true);
    if (!settings.getUseWideViewPort()) settings.setUseWideViewPort(true);
}
1
Fire3galaxy

Wenn Sie die Webansicht herausgefunden haben, aber Ihre Bilder immer noch nicht maßstabsgetreu sind, bestand die beste Lösung, die ich gefunden habe ( hier ) darin, dem Dokument einfach Folgendes voran zu stellen:

<style>img{display: inline; height: auto; max-width: 100%;}</style>

Infolgedessen werden alle Bilder so skaliert, dass sie der Breite der Webansicht entsprechen.

0
dsalaj