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ć?

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

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.


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!


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 .


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

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


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


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.


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>

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

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

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.


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.


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

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.


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

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

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

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!


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

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
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.