Android Webview - strona internetowa powinna mieścić się na ekranie urządzenia

103

Próbowałem dopasować stronę internetową w zależności od rozmiaru ekranu urządzenia.

mWebview.setInitialScale(30);

a następnie ustaw rzutnię metadanych

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

Ale nic nie działa, strona internetowa nie jest dostosowana do rozmiaru ekranu urządzenia.

Czy ktoś może mi powiedzieć, jak to zdobyć?

SWDeveloper
źródło

Odpowiedzi:

82

Musisz obliczyć skalę, której musisz użyć ręcznie, zamiast ustawiać na 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();
}

Następnie użyj

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());
danh32
źródło
7
Dziękuję za odpowiedź, masz rację, to działa. ale mam inny problem. Nie ładuję obrazu, ładuję stronę internetową w widoku internetowym, więc jak sprawdzić szerokość strony (PIC_WIDTH).
SWDeveloper
1
Ach, tęskniłem za tą stałą tam. Przepraszam za to. Nie jestem pewien, jak uzyskać szerokość rzeczywistej strony internetowej.
danh32
54
Co tu jest PIC_WIDTH?
Paresh Mayani
4
PIC_WIDTH był stałą, którą znałem wcześniej, ponieważ wyświetlałem tylko jeden obraz z folderu zasobów. Jak powiedziałem powyżej, nie wiem, jak uzyskać szerokość rzeczywistej strony internetowej.
danh32
1
@MaheshwarLigade używam PIC_WIDTH = 360
Nicholas Ng
292

Możesz tego użyć

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

to naprawia rozmiar na podstawie rozmiaru ekranu.

Tushar Vengurlekar
źródło
4
To podpiera ekran, ale nie pozwala już na powiększanie / zmniejszanie. Czy ten problem można poprawić ?, wiem, że jest to możliwe na IOS.
AlexAndro
1
to ustawienie działa u mnie ale tylko dla szerokości, w tych samych przypadkach teraz
obcina
1
To najlepsze rozwiązanie, jakie do tej pory znalazłem.
fragon
1
Fakt, że rozwiązanie jest wbudowane, naprawdę mnie przekonuje.
Daniel Handojo
3
Aby dodać powiększenie, dodaj: webview.getSettings (). SetBuiltInZoomControls (true); webview.getSettings (). setDisplayZoomControls (false);
Andrew
34

Przyjaciele,

Znalazłem od Ciebie wiele ważnych i świetnych informacji. Ale jedyny sposób działał dla mnie w ten sposób:

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

Pracuję na Androidzie 2.1 ze względu na rodzaj urządzeń tej firmy. Ale rozwiązałem swój problem, korzystając z części informacji z każdego z nich.

Dzięki Ci!

Josmar Peixe
źródło
Wtedy powiększanie już nie działa. Tylko ja mam ten problem?
testowanie
@testing Czy dostałeś jakieś rozwiązanie?
Anshul Tyagi
@AnshulTyagi: Nie, nie zrobiłem tego. Ponieważ był to dla mnie projekt testowy, nie badałem tego dalej. Daj mi znać, jeśli coś znajdziesz!
testowanie
@AnshulTyagi: W przypadku stron internetowych to podejście działa dla mnie. W przypadku obrazów muszę użyć czegoś innego ...
testowanie
31

Te ustawienia zadziałały dla mnie:

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

W moich próbach brakowało setInitialScale (1) .

Chociaż dokumentacja mówi, że 0 spowoduje powiększenie do końca, jeśli setUseWideViewPort jest ustawiony na true, ale 0 nie działało dla mnie i musiałem ustawić 1 .

Doc
źródło
1
Nie ustalałem początkowej skali i działało to na mnie latami. (Właśnie ustawiałem tryb przeglądu i rzutnię). Ale nowe urządzenie, na które właśnie natknąłem się, zaczęło się powiększać, dopóki strona nie została odświeżona. Ustawienie skali początkowej naprawiło to dla mnie.
IAmGroot
15

Wszystko, co musisz zrobić, to po prostu

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
Muhammad Aamir Ali
źródło
13

Te działają dla mnie i dopasowują WebView do szerokości ekranu:

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

Dzięki powyższym radom i białej linii w widoku Eclipse Web

Nezneika
źródło
3
Wygląda na to, że SINGLE_COLUMN jest przestarzały developer.android.com/reference/android/webkit/ ...
Alexander Abramov
11

Mam ten sam problem, kiedy używam tego kodu

webview.setWebViewClient(new WebViewClient() {
}

więc być może powinieneś usunąć go ze swojego kodu
I pamiętaj, aby dodać 3 tryby poniżej dla swojego widoku internetowego

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

to naprawia rozmiar na podstawie rozmiaru ekranu

Linh
źródło
2
@shahzainali, możesz powiększyć widok strony?
Anshul Tyagi
@AnshulTyagi Nie, nie powiększa.
shahzain ali
6
WebView browser = (WebView) findViewById(R.id.webview);
browser.getSettings().setLoadWithOverviewMode(true);
browser.getSettings().setUseWideViewPort(true);
browser.getSettings().setMinimumFontSize(40);

Działa to świetnie, ponieważ rozmiar tekstu został ustawiony na naprawdę mały przez .setLoadWithOverViewMode i .setUseWideViewPort.

Steve
źródło
6

Miałem wideo w ciągu html, a szerokość widoku sieci Web była większa niż szerokość ekranu i to działa dla mnie.

Dodaj te linie do ciągu HTML.

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

Wynik po dodaniu powyższego kodu do ciągu HTML:

<!DOCTYPE html>
<html>

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


</html>
Biljana Divljak
źródło
5

W tym przypadku musisz użyć HTML w swoim webView. Rozwiązałem to za pomocą następującego kodu

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
źródło
Myślę, że lepiej jest użyć px ot vh zamiast%. % w elementach iframe ma pewne błędy przy zmianie orientacji
Siarhei,
4

Dokonywanie zmian w odpowiedzi przez danh32 od momentu wyświetlenia.getWidth (); jest teraz przestarzała.

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

Następnie użyj

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());
Ducktales
źródło
Obliczyłem, że skala powinna być <1 lub 100%, więc porównałem moją szerokość z PIC_WIDTH, aby uzyskać stosunek. Co więcej, odliczyłem też trochę wypełnienia.
Abhinav Saxena
4

Wygląda na to, że jest to problem z XML. Otwórz dokument XML zawierający Twój widok sieciowy. Usuń kod dopełniający u góry.

Następnie w układzie dodaj

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

W widoku sieci Web dodaj

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

Dzięki temu Web-View dopasowuje się do ekranu urządzenia.

ZakiHacky
źródło
to oszczędza mój czas.
Kabkee
2
fill_parent jest nieaktualny, użyj match_parent.
Trevor Hart
3
webview.setInitialScale(1);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setJavaScriptEnabled(true);

zadziała, ale pamiętaj, aby usunąć coś takiego:

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

jeśli istniał w pliku html lub zmień user-scalable = yes, w przeciwnym razie nie.

Hoang Nguyen Huu
źródło
2
int PIC_WIDTH= webView.getRight()-webView.getLeft();
Jan
źródło
1
getRight i getLeft zawsze zwracają dla mnie 0
yrazlik
2

Pomoże to w dostosowaniu emulatora do strony internetowej:

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

Możesz ustawić początkową skalę w procentach, jak pokazano powyżej.

jagadeesh
źródło
2

Metoda getWidth obiektu Display jest nieaktualna. Zastąp onSizeChanged, aby uzyskać rozmiar WebView, gdy stanie się dostępny.

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
źródło
Jak otrzymujesz WEB_PAGE_WIDTH?
testowanie
Jeśli próbujesz przeskalować niektóre treści o stałej szerokości, aby dopasować je do ekranu, powinieneś wcześniej wiedzieć, jak szeroka jest ta zawartość. Czy to ma sens?
SharkAlley
OK, to powinno działać w przypadku obrazów. Jednak w przypadku stron internetowych (które mogą być responsywne) może to być na przykład dowolna szerokość> 320 pikseli.
testowanie
1

W teorii połączenie:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); 

z

settings.setUseWideViewPort(false)

rozwiązuje problem, zawijając zawartość i dopasowując się do ekranu. Ale NARROW_COLUMNS został wycofany. Radzę przeczytać poniższy wątek, który szczegółowo omawia problem: https://code.google.com/p/android/issues/detail?id=62378

Alécio Carvalho
źródło
1

oto zaktualizowana wersja, która nie używa przestarzałych metod, oparta na odpowiedzi @ 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;
    }
}

do stosowania jednakowego:

int initialScale = this.getScale(420d);
this.mWebView.setInitialScale(initialScale);
Martin Zeitler
źródło
0

Dla porównania, jest to implementacja Kotlin rozwiązania @ 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()
}

W moim przypadku szerokość została określona przez trzy obrazy na 300 pikseli, więc:

webview.setInitialScale(getWebviewScale(300))

Znalezienie tego posta zajęło mi wiele godzin. Dzięki!

steven smith
źródło
-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
źródło
Prosimy nie publikować dwóch odpowiedzi o tej samej treści tylko z powodu głosów negatywnych.
techydesigner
I proszę sformatuj swój kod, poświęcając trochę wysiłku! Dlaczego tak bardzo wciąłeś go w prawo? Za dużo czasu na usunięcie spacji?
Massimiliano Kraus