web-dev-qa-db-fra.com

Comment définir le zoom / largeur initial pour une vue Web

J'essaie d'obtenir un comportement similaire de la WebView à celle du navigateur Android). Le navigateur ouvre toutes les pages de manière à ajuster leur largeur à l'écran. Cependant, le comportement par défaut du WebView doit commencer à une échelle de pixels de 100% pour commencer à effectuer un zoom avant dans le coin supérieur gauche.

J'ai passé les dernières heures à essayer de trouver un moyen de faire en sorte que WebView redimensionne la page à l'écran comme dans le navigateur, mais je n'ai aucune chance. Quelqu'un a-t-il trouvé un moyen d'y parvenir?

Je vois un paramètre appelé setLoadWithOverviewMode, mais cela ne semble rien avoir du tout. J'ai également essayé setInitialScale, mais sur différentes tailles d'écran et de pages Web, elles ne seront pas aussi élégantes 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 est en mode paysage mais pas en mode portrait. En mode portrait, il est proche mais ne s'adapte toujours pas à tout l'écran de la page. Je commence cette prime avec l'espoir qu'il existe un moyen infaillible d'obtenir le zoom initial pour adapter la page à la largeur de la page, quelle que soit l'orientation ou la taille de l'écran.

androidwebviewwidthscaleandroid-webview
73
cottonBallPaws

Le code suivant charge la version de bureau de la page d’accueil de Google dans son intégralité pour s’adapter au webview pour moi dans Android 2.2 sur un écran de 854 x 480 pixels. Lorsque je réoriente le périphérique et il recharge en portrait ou en paysage, la largeur de la page correspond entièrement à 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();
        }
    }
}
155
Brian

J'ai compris pourquoi la vue portrait ne remplissait pas totalement la fenêtre. Au moins dans mon cas, c'était parce que la barre de défilement était toujours affichée. En plus du code de la fenêtre d'affichage ci-dessus, essayez d'ajouter ceci:

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

Ainsi, la barre de défilement ne prend pas beaucoup de place et permet à la page Web de remplir la fenêtre.

J'espère que cela t'aides

20
Dean

C'est une vieille question, mais permettez-moi d'ajouter un détail au cas où plus de gens comme moi arriveraient ici.

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

browser.setInitialScale(30);

Le paramètre peut être n’importe quel pourcentage permettant au contenu redimensionné d’être plus petit que la largeur de la vue Web. Ensuite, setUseWideViewPort (true) étend la largeur du contenu au maximum de la largeur de la vue Web.

13
Ivan BASART

Essayez en utilisant une fenêtre large :

 webview.getSettings().setUseWideViewPort(true);
7
Brian

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

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

Je travaille avec le chargement des images pour cette réponse et je veux qu'elles soient redimensionnées à la largeur de l'appareil. Je trouve que, pour les téléphones plus anciens avec des versions inférieures à API 19 (KitKat), le comportement de la réponse de Brian n’est pas tout à fait comme je l’aime. Cela laisse beaucoup d’espace autour des images des téléphones plus anciens, mais fonctionne avec le plus récent. Voici mon alternative, avec l'aide de cette réponse: WebView d'Android peut-il redimensionner automatiquement des images énormes? L'algorithme de disposition SINGLE_COLUMN est obsolète, mais cela fonctionne et j'estime qu'il est approprié de travailler avec des vues Web plus anciennes.

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

Si vous avez compris la vue Web mais que vos images sont toujours hors d’échelle, la meilleure solution que j’ai trouvée ( ici ) consistait simplement à ajouter le document au début du document avec:

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

En conséquence, toutes les images sont redimensionnées pour correspondre à la largeur de la vue Web.

0
dsalaj