Como definir o zoom/largura inicial para uma Webview

Question

Estou tentando fazer com que o WebView tenha um comportamento semelhante ao navegador Android. O navegador abre todas as páginas de uma maneira que tenta se ajustar à sua largura na tela. No entanto, o comportamento padrão do WebView é começar em uma escala de 100% de pixels, para que ele comece o zoom no canto superior esquerdo.

Passei as últimas duas horas tentando encontrar uma maneira de fazer com que o Webview escala a página para a tela, como acontece no navegador, mas não estou tendo sorte. Alguém encontrou uma maneira de conseguir isso?

Vejo que é uma configuração chamada setLoadWitHoverViewMode, mas isso não parecia fazer nada. Também experimentei o SetinitialScale, mas em diferentes tamanhos de tela e tamanhos de página da web, que não serão tão graciosos quanto os navegadores.

Alguém tem algum leads?

Obrigado

EDIT: O método de Brian parece funcionar quando o telefone na paisagem, mas não em retrato. No retrato, é próximo, mas ainda não se encaixa em toda a tela da página. Comecei esta recompensa com a esperança de que haja uma maneira infalível de obter o zoom inicial para caber na página à largura da página em qualquer orientação ou tamanho da tela.

Answer 1

O código a seguir carrega a versão desktop da página inicial do Google totalmente ampliada para se encaixar no webview Para mim, no Android 2.2, em uma tela de 854x480 pixels. Quando reoriento o dispositivo e ele recarrega em retrato ou paisagem, a largura da página se encaixa inteiramente dentro da vista a cada vez.

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>

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

Answer 2

Eu descobri por que a visão de retrato não estava totalmente preenchendo a viewport. Pelo menos no meu caso, foi porque a barra de rolagem estava sempre aparecendo. Além do código da viewport acima, tente adicionar isso:

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

Isso faz com que a barra de rolagem não ocupe o espaço de layout e permite que a página da web preencha a viewport.

Espero que isto ajude

Answer 3

É uma pergunta antiga, mas deixe -me acrescentar um detalhe, caso mais pessoas como eu cheguem aqui.

A excelente resposta postada por Brian não está funcionando para mim em Jelly Bean. Eu tenho que adicionar também:

browser.setInitialScale(30);

O parâmetro pode ser qualquer porcentagem que obtenha que o conteúdo redimensionado seja menor que a largura da WebView. Em seguida, o SetusewideViewPort (true) estende a largura do conteúdo ao máximo da largura da WebView.

Answer 4

Tentar Usando uma ampla visualização:

 webview.getSettings().setUseWideViewPort(true);

Answer 5

// Para imagens e vídeos SWF, use a largura como "100%" e altura como "98%"

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

Answer 6

Estou trabalhando com o carregamento de imagens para esta resposta e quero que elas sejam dimensionadas para a largura do dispositivo. Acho que, para telefones mais antigos com versões menos que a API 19 (Kitkat), o comportamento da resposta de Brian não é exatamente como eu gosto. Ele coloca muito espaço em branco em torno de algumas imagens em telefones mais antigos, mas funciona no meu mais novo. Aqui está minha alternativa, com a ajuda desta resposta: O WebView do Android pode redimensionar automaticamente imagens enormes? O algoritmo de layout SINGLE_COLUMN está descontinuado, mas funciona e sinto que é apropriado para trabalhar com visualizações da Web mais antigas.

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

Answer 7

Se você tem a visualização da web descobriu, mas suas imagens ainda estão fora de escala, a melhor solução que encontrei (aqui) estava simplesmente anteceder o documento com:

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

Como resultado, todas as imagens são dimensionadas para corresponder à largura da visualização da web.