Comment régler le zoom / largeur initiale pour une WebView

Question

Je suis en train d'obtenir le WebView d'avoir le même comportement que le navigateur Android. Le navigateur ouvre toutes les pages d'une manière qui tente d'adapter leur largeur à l'écran. Cependant, le comportement par défaut de la WebView est de commencer à une échelle de pixel de 100% il commence à zoomé sur le coin supérieur gauche.

J'ai passé les dernières heures d'un couple d'essayer de trouver un moyen d'obtenir la WebView à l'échelle la page à l'écran comme il le fait dans le navigateur mais je ne suis pas avoir de chance. Quelqu'un at-il trouvé un moyen d'y arriver?

Je vois est un paramètre appelé setLoadWithOverviewMode, mais cela ne semble pas faire quoi que ce soit du tout. J'ai aussi expérimenté avec setInitialScale mais sur différentes tailles d'écran et la taille des pages Web qui ne seront pas aussi gracieuse que la mise à l'échelle des navigateurs.

Quelqu'un a des pistes?

Merci

EDIT: la méthode de Brian semble fonctionner lorsque le téléphone dans le paysage, mais pas en mode portrait. Dans le portrait, il est proche, mais ne rentre toujours pas tout l'écran dans la page. Je commence cette prime avec l'espoir il y a un moyen infaillible pour obtenir le zoom initial pour adapter la page à la largeur de la page en toute taille d'orientation ou de l'écran.

Answer 1

Le code suivant charge la version de bureau de la page d'accueil Google en zoom pour se loger dans le webview pour moi dans Android 2.2 sur un écran pixel 854x480. Quand je Réorienter l'appareil et rechargements en mode portrait ou paysage, la largeur de la page correspond tout à fait dans la vue à chaque fois.

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

Answer 2

Je me suis dit pourquoi le mode portrait n'a pas été tout à fait remplir la fenêtre. Au moins dans mon cas, ce fut parce que la barre de défilement est toujours affiché. En plus du code de la fenêtre ci-dessus, essayez d'ajouter ceci:

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

Cela provoque la barre de défilement de ne pas prendre l'espace de mise en page, et permet à la page Web pour remplir la fenêtre.

Hope this helps

Answer 3

Il est et vieille question, mais laissez-moi ajouter un détail juste au cas où plus de gens comme moi arrivent ici.

L'excellente réponse publié par Brian ne travaille pas pour moi dans Jelly Bean. Je dois aussi ajouter:

browser.setInitialScale(30);

Le paramètre peut être l'un quelconque pourcentage tha accomplit ce que la teneur redimensionnée est plus petite que la largeur de webview. Puis setUseWideViewPort (true) étend la largeur de contenu au maximum de la largeur webview.

Answer 4

Essayez en utilisant une large fenêtre :

 webview.getSettings().setUseWideViewPort(true);

Answer 5

// pour les images et les vidéos swf utilisent la largeur "100%" et la hauteur "98%"

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

Answer 6

Je travaille avec des images de chargement pour cette réponse et je veux qu'ils soient mis à l'échelle à la largeur de l'appareil. Je trouve que, pour les téléphones plus anciens avec des versions moins de 19 API (KitKat), le comportement de la réponse de Brian est pas tout à fait comme je l'aime. Il met beaucoup d'espaces autour de quelques images sur les téléphones plus anciens, mais fonctionne sur mon plus récent. Voici ma solution, avec l'aide de cette réponse: Peut-WebView Android redimensionner automatiquement les images énormes? L'algorithme de mise en page SINGLE_COLUMN est dépréciée, mais cela fonctionne et je me sens comme il convient pour travailler avec webviews plus.

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

Si vous avez la vue Web a compris, mais vos images sont toujours hors d'échelle, la meilleure solution que je trouve ( ) a été préfixer simplement le document:

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

En conséquence, toutes les images sont mis à l'échelle pour correspondre à la largeur de la vue Web.