Android Webview - a página da web deve caber na tela do dispositivo


103

Tentei o seguinte para ajustar a página da web com base no tamanho da tela do dispositivo.

mWebview.setInitialScale(30);

e definir a janela de visualização de metadados

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

Mas nada funciona, a página da web não é fixa ao tamanho da tela do dispositivo.

Alguém pode me dizer como fazer isso?

Respostas:


82

Você deve calcular a escala que você precisa para usar manualmente, em vez de definir para 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();
}

Então use

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());

7
Obrigado pela sua resposta, você está certo, funciona. mas eu tenho um problema diferente. Não estou carregando uma imagem, carregando a página da web no webview, Então, como descobrir a largura da página (PIC_WIDTH).
SWDeveloper

1
Ah, eu senti falta daquela constante ali. Me desculpe por isso. Não tenho certeza de como você pode obter a largura da página da web real.
danh32,

54
O que é PIC_WIDTH aqui?
Paresh Mayani

4
PIC_WIDTH era uma constante que eu conhecia de antemão, já que estava apenas exibindo uma única imagem da pasta de ativos. Como eu disse acima, não sei como você pode obter a largura da página real.
danh32

1
@MaheshwarLigade i use PIC_WIDTH = 360
Nicholas Ng

292

Você pode usar isso

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

isso corrige o tamanho com base no tamanho da tela.


4
Isso posiciona a tela, mas não permite mais aumentar / diminuir o zoom. Este problema poderia ser melhorado ?, Eu sei que é possível no IOS.
AlexAndro

1
essas configurações funcionam para mim, mas apenas para a largura, nos mesmos casos agora está cortando a altura
albanx

1
Esta é a melhor solução que encontrei até agora.
fragon

1
O fato de a solução estar embutida realmente me conquista.
Daniel Handojo

3
Para adicionar zoom, adicione o seguinte: webview.getSettings (). SetBuiltInZoomControls (true); webview.getSettings (). setDisplayZoomControls (false);
Andrew,

34

Amigos,

Eu achei muita importação e ótimas informações de você. Mas, a única maneira que funciona para mim é esta:

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

Estou trabalhando no Android 2.1 por causa do tipo de dispositivos da empresa. Mas resolvi meu problema usando a parte das informações de cada um.

Te agradece!


Então o zoom não funciona mais. Eu sou o único com esse problema?
teste de

@testing você conseguiu alguma solução para isso?
Anshul Tyagi de

@AnshulTyagi: Não, não disse. Porque foi um projeto de teste para mim, não investiguei mais sobre isso. Avise-me se encontrar algo!
teste de

@AnshulTyagi: Para páginas da web, essa abordagem está funcionando para mim. Para as imagens, preciso usar algo diferente ...
teste em

31

Essas configurações funcionaram para mim:

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

setInitialScale (1) estava faltando em minhas tentativas.

Embora a documentação diga que 0 diminuirá o zoom totalmente se setUseWideViewPort estiver definido como verdadeiro, mas 0 não funcionou para mim e eu tive que definir 1 .


1
Eu não estava definindo a escala inicial, e funcionou para mim por anos. (eu estava configurando o modo de visão geral e a janela de visualização). Mas um novo dispositivo que acabei de encontrar parecia começar a aumentar o zoom até que a página foi atualizada. Definir a escala inicial corrigiu isso para mim.
Doomsknight


15

Tudo que você precisa fazer é simplesmente

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

13

Eles funcionam para mim e ajustam o WebView à largura da tela:

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

Obrigado acima, aconselha e linha branca na visualização da Web do eclipse


3
Parece que SINGLE_COLUMN está obsoleto agora developer.android.com/reference/android/webkit/…
Alexander Abramov

11

Eu tenho o mesmo problema quando uso este código

webview.setWebViewClient(new WebViewClient() {
}

assim pode ser você deve removê- lo do seu código
E lembre-se de adicionar 3 modos abaixo para o seu webview

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

isso corrige o tamanho com base no tamanho da tela


2
@shahzainali você pode ampliar seu webview?
Anshul Tyagi de

@AnshulTyagi Não, não faz zoom.
shahzain ali de

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

Isso funciona muito bem para mim, pois o tamanho do texto foi definido como muito pequeno por .setLoadWithOverViewMode e .setUseWideViewPort.


6

Eu tinha um vídeo em string html, e a largura da visualização da web era maior do que a largura da tela e isso está funcionando para mim.

Adicione essas linhas à string HTML.

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

Resultado após adicionar o código acima à string HTML:

<!DOCTYPE html>
<html>

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


</html>

5

Você tem que usar HTML em seu webView neste caso. Eu resolvi isso usando o seguinte código

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

Acho que é melhor usar px ot vh em vez de%. % em iframes tem alguns bugs nas mudanças de orientação
Siarhei

4

Fazendo alterações na resposta por danh32 desde o display.getWidth (); agora está obsoleto.

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

Então use

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());

Calculei que a escala deveria ser <1 ou 100%, então comparei minha largura com PIC_WIDTH para obter a proporção. Mais do que isso, também deduzi algum enchimento.
Abhinav Saxena

4

Parece um problema de XML. Abra o documento XML que contém seu Web-View. Exclua o código de preenchimento na parte superior.

Em seguida, no layout, adicione

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

No Web-View, adicione

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

Isso faz com que o Web-View se ajuste à tela do dispositivo.


é isso que economiza meu tempo.
Kabkee

2
fill_parent está desatualizado, use match_parent.
Trevor Hart

3
webview.setInitialScale(1);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setJavaScriptEnabled(true);

funcionará, mas lembre-se de remover algo como:

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

se existia no arquivo html ou altere escalável pelo usuário = sim, caso contrário não.


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

1
getRight e getLeft sempre retornam 0 para mim
yrazlik

2

Isso ajudará a ajustar o emulador de acordo com a página da web:

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

Você pode definir a escala inicial em porcentagem, conforme mostrado acima.


2

O método getWidth do objeto Display está obsoleto. Substitua onSizeChanged para obter o tamanho do WebView quando estiver disponível.

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

Como você consegue WEB_PAGE_WIDTH?
teste de

Se você está tentando dimensionar algum conteúdo de largura fixa para caber na tela, você deve saber com antecedência a largura do seu conteúdo. Isso faz sentido?
SharkAlley

OK, isso deve funcionar para imagens. Mas para páginas da web (que podem ser responsivas), pode ter qualquer largura> 320 px, por exemplo.
teste de


1

aqui está uma versão atualizada, sem usar métodos obsoletos, com base na resposta de @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;
    }
}

para ser usado da mesma forma:

int initialScale = this.getScale(420d);
this.mWebView.setInitialScale(initialScale);

0

Para referência, esta é uma implementação Kotlin da solução de @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()
}

No meu caso, a largura foi determinada por três imagens como sendo 300 pixels:

webview.setInitialScale(getWebviewScale(300))

Levei horas para encontrar este post. Obrigado!


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

Por favor, não poste duas respostas com o mesmo conteúdo apenas por causa de votos negativos.
techydesigner

E, por favor, formate seu código gastando um pouco de esforço! Por que você recuou tanto para a direita? Muito tempo para excluir algum espaço em branco?
Massimiliano Kraus
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.