web-dev-qa-db-fra.com

Android Webview - La page Web doit correspondre à l'écran de l'appareil

J'ai essayé ce qui suit pour adapter la page Web en fonction de la taille de l'écran du périphérique.

mWebview.setInitialScale(30);

puis définissez la fenêtre de métadonnées

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

Mais rien ne fonctionne, la page Web n'est pas fixée à la taille de l'écran de l'appareil.

Quelqu'un peut-il me dire comment l'obtenir?

androidwebviewscalingandroid-webview
89
SWDeveloper

Vous devez calculer l'échelle que vous devez utiliser manuellement, au lieu de la définir sur 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();
}

Puis utiliser

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

Vous pouvez utiliser ceci

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

cela corrige la taille en fonction de la taille de l'écran.

259
Tushar Vengurlekar

Copains, 

J'ai trouvé beaucoup d'importations et d'excellentes informations de votre part. Mais le seul moyen qui fonctionne pour moi était la suivante:

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

Je travaille sur Android 2.1 en raison du type d'appareils de la société. Mais j'ai résolu mon problème en utilisant la partie des informations de chacun.

Merci!

29
Josmar Peixe

Essayez avec ces astuces HTML5

http://www.html5rocks.com/en/mobile/mobifying.html

Et avec cela si votre version Android est 2.1 ou supérieure

  WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
25
josebetomex

Ces paramètres ont fonctionné pour moi:

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

setInitialScale (1) était manquant dans mes tentatives.

Bien que la documentation indique que 0 effectuera un zoom avant si setUseWideViewPort est défini sur true mais 0 n'a pas fonctionné pour moi et que je devais définir 1 .

22
Doc

Tout ce que vous devez faire est simplement

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
14
Muhammad Aamir Ali

Celles-ci fonctionnent pour moi et adaptent WebView à la largeur de l'écran:

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

Merci ci-dessus conseils et Ligne blanche dans la vue Web Eclipse

13
Nezneika

J'ai le même problème quand j'utilise ce code

webview.setWebViewClient(new WebViewClient() {
}

alors peut-être devriez-vous supprimer il dans votre code
Et n'oubliez pas d'ajouter 3 modes ci-dessous pour votre vue Web 

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

cela corrige la taille en fonction de la taille de l'écran

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

Cela fonctionne très bien pour moi puisque la taille du texte a été définie comme étant vraiment petite par .setLoadWithOverViewMode et .setUseWideViewPort. 

6
Steve

Vous devez utiliser HTML dans votre webView dans ce cas. J'ai résolu ceci en utilisant le code suivant

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);
4
Qadir Hussain

Cela ressemble à un problème XML. Ouvrez le document XML contenant votre Web-View. Supprimez le code de remplissage en haut. 

Puis dans la mise en page, ajoutez

Android:layout_width="fill_parent"
Android:layout_height="fill_parent"

Dans la vue Web, ajoutez 

Android:layout_width="fill_parent"
Android:layout_height="fill_parent"

Cela rend Web-View adapté à l'écran du périphérique.

4
ZakiHacky

Modification de la réponse par danh32 depuis le display.getWidth (); est maintenant obsolète.

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

Puis utiliser

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

J'ai eu la vidéo en chaîne HTML, et la largeur de la vue Web était plus grande que la largeur de l'écran et cela fonctionne pour moi.

Ajoutez ces lignes à la chaîne HTML. 

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

Résultat après l'ajout du code ci-dessus à la chaîne HTML:

<!DOCTYPE html>
<html>

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


</html>
3
Biljana Divljak

La méthode getWidth de l'objet Display est obsolète. Remplacez onSizeChanged pour obtenir la taille de la vue Web lorsqu'elle devient disponible.

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);
    }
};
2
SharkAlley
webview.setInitialScale(1);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setJavaScriptEnabled(true);

fonctionnera, mais n'oubliez pas de supprimer quelque chose comme:

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

s'il existait dans le fichier html ou change user-scalable = yes, sinon ce ne sera pas.

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

En théorie, la combinaison de:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);

avec 

settings.setUseWideViewPort(false)

résout le problème, en enveloppant le contenu et en l'ajustant à l'écran. Mais le NARROW_COLUMNS est obsolète. Je vous conseille de lire ce fil ci-dessous qui explore le problème en détail: https://code.google.com/p/Android/issues/detail?id=62378

1
Alécio Carvalho

Cela aidera à ajuster l'émulateur en fonction de la page Web:

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

Vous pouvez définir l’échelle initiale en pourcentage, comme indiqué ci-dessus.

1
jagadeesh
  • setLoadWithOverviewMode(true) - charge le WebView complètement zoomé
  • setUseWideViewPort(true) donne à la vue Web une fenêtre d'affichage normale (telle qu'un navigateur de bureau normal), tandis que si elle est définie sur false, la vue Web est limitée à ses propres dimensions (ainsi, si la vue Web mesure 50px * 50px, elle sera la même Taille)

Lire la suite ici

Je me suis trouvé dans une situation où je n'étais pas propriétaire de WebView. J'ai également redimensionné WebView une fois la page terminée. J'ai donc eu un effet secondaire avec le zoom. Ma solution est:

webView.post(new Runnable() {
    @Override
    public void run() {
        webView.getSettings().setLoadWithOverviewMode(true);
    }
});
0
yoAlex5

voici une version mise à jour, n'utilisant pas de méthodes obsolètes, basée sur la réponse 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;
    }
}

à utiliser de la même manière:

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