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

103

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

mWebview.setInitialScale(30);

puis définissez la fenêtre des 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 obtenir cela?

SWDeveloper
la source

Réponses:

82

Vous devez calculer l'échelle que vous devez utiliser manuellement, plutôt que 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();
}

Ensuite, utilisez

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());
danh32
la source
7
Merci pour votre réponse, vous avez raison, cela fonctionne. mais j'ai un problème différent. Je ne charge pas d'image, je charge la page Web dans la vue Web, alors comment connaître la largeur de la page Web (PIC_WIDTH).
SWDeveloper
1
Ah, j'ai raté cette constante là-dedans. Désolé pour ça. Je ne sais pas comment obtenir la largeur de la page Web réelle.
danh32
54
Qu'est-ce que PIC_WIDTH ici?
Paresh Mayani
4
PIC_WIDTH était une constante que je connaissais à l'avance, car je n'affichais qu'une seule image du dossier des actifs. Comme je l'ai dit ci-dessus, je ne sais pas comment vous pouvez obtenir la largeur de la page Web réelle.
danh32
1
@MaheshwarLigade j'utilise PIC_WIDTH = 360
Nicholas Ng
292

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.

Tushar Vengurlekar
la source
4
Cela parcourt l'écran mais ne vous permet plus de faire un zoom avant / arrière. Ce problème pourrait-il être amélioré?, Je sais que c'est possible sur IOS.
AlexAndro
1
ces réglages fonctionnent pour moi mais seulement pour la largeur, dans les mêmes cas maintenant il coupe la hauteur
albanx
1
C'est la meilleure solution pour y parvenir que j'ai trouvée jusqu'à présent.
vendredi
1
Le fait que la solution soit intégrée me séduit vraiment.
Daniel Handojo
3
Pour ajouter un zoom, ajoutez ce qui suit: webview.getSettings (). SetBuiltInZoomControls (true); webview.getSettings (). setDisplayZoomControls (false);
Andrew
34

Copains,

J'ai trouvé beaucoup d'importations et d'excellentes informations de votre part. Mais, la seule façon de fonctionner 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 l'entreprise. Mais j'ai résolu mon problème en utilisant la partie des informations de chacun.

Merci!

Josmar Peixe
la source
Ensuite, le zoom ne fonctionne plus. Je suis le seul à avoir ce problème?
test
@testing en avez-vous trouvé une solution?
Anshul Tyagi
@AnshulTyagi: Non, je ne l'ai pas fait. Parce que c'était un projet de test pour moi, je n'ai pas approfondi cette question. Faites-moi savoir si vous trouvez quelque chose!
test le
@AnshulTyagi: Pour les pages Web, cette approche fonctionne pour moi. Pour les images, je dois utiliser quelque chose de différent ...
test du
31

Ces paramètres ont fonctionné pour moi:

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

setInitialScale (1) manquait dans mes tentatives.

Bien que la documentation indique que 0 fera un zoom arrière complet si setUseWideViewPort est défini sur true, mais 0 n'a pas fonctionné pour moi et j'ai dû définir 1 .

Doc
la source
1
Je n'ai pas défini l'échelle initiale, et cela a fonctionné pour moi pendant des années. (je définissais juste le mode vue d'ensemble et la fenêtre d'affichage). Mais un nouvel appareil que je viens de rencontrer semble commencer à zoomer jusqu'à ce que la page s'actualise. La définition de l'échelle initiale a corrigé cela pour moi.
Doomsknight
25

Essayez avec ces astuces HTML5

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

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

  WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
josebetomex
la source
2
malheureusement, ils ont déprécié cela et cette solution a échoué pour moi sur Galaxy S5
2cupsOfTech
15

Tout ce que vous avez à faire est simplement

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
Muhammad Aamir Ali
la source
13

Ceux-ci fonctionnent pour moi et adaptent la 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 conseille et ligne blanche dans la vue Web éclipse

Nezneika
la source
3
Il semble que SINGLE_COLUMN soit maintenant obsolète developer.android.com/reference/android/webkit/…
Alexander Abramov
11

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

webview.setWebViewClient(new WebViewClient() {
}

vous devriez peut-être le supprimer dans votre code
Et n'oubliez pas d'ajouter 3 modes ci-dessous pour votre webview

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

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

Linh
la source
2
@shahzainali pouvez-vous agrandir votre vue Web?
Anshul Tyagi
@AnshulTyagi Non, il ne fait pas de zoom.
shahzain ali
6
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 car la taille du texte a été définie sur très petite par .setLoadWithOverViewMode et .setUseWideViewPort.

Steve
la source
6

J'avais une vidéo dans une 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>
Biljana Divljak
la source
5

Dans ce cas, vous devez utiliser HTML dans votre webView. J'ai résolu cela 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);
Qadir Hussain
la source
je suppose qu'il est préférable d'utiliser px ot vh au lieu de%. % dans les iframes ont des bugs sur les changements d'orientation
Siarhei
4

Apporter des modifications à la réponse par danh32 depuis l'affichage.getWidth (); est désormais 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();
}

Ensuite, utilisez

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());
Contes de canard
la source
J'ai calculé que l'échelle devait être <1 ou 100%, j'ai donc comparé ma largeur avec PIC_WIDTH pour obtenir le rapport. Plus que cela, j'ai également déduit un rembourrage.
Abhinav Saxena
4

Cela semble être un problème XML. Ouvrez le document XML contenant votre vue Web. 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 permet à la vue Web de s'adapter à l'écran de l'appareil.

ZakiHacky
la source
c'est ce qui me fait gagner du temps.
Kabkee
2
fill_parent est obsolète, utilisez match_parent.
Trevor Hart
3
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 changez user-scalable = yes, sinon ce ne sera pas le cas.

Hoang Nguyen Huu
la source
2
int PIC_WIDTH= webView.getRight()-webView.getLeft();
John
la source
1
getRight et getLeft renvoie toujours 0 pour moi
yrazlik
2

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.

Jagadeesh
la source
2

La méthode getWidth de l'objet Display est obsolète. Remplacez onSizeChanged pour obtenir la taille de la WebView 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);
    }
};
SharkAlley
la source
Comment obtenez-vous WEB_PAGE_WIDTH?
test le
Si vous essayez de mettre à l'échelle un contenu de largeur fixe pour l'adapter à l'écran, vous devez savoir à l'avance la largeur de votre contenu. Cela a-t-il du sens?
SharkAlley
OK, cela devrait fonctionner pour les images. Mais pour les pages Web (qui peuvent être réactives), il peut s'agir de toute largeur> 320 px par exemple.
test
1

En théorie, la combinaison de:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); 

avec

settings.setUseWideViewPort(false)

corrige le problème, enveloppant le contenu et s'adaptant à l'écran. Mais 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

Alécio Carvalho
la source
1

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);
Martin Zeitler
la source
0

Pour référence, il s'agit d'une implémentation Kotlin de la solution 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()
}

Dans mon cas, la largeur a été déterminée par trois images à 300 pixels, donc:

webview.setInitialScale(getWebviewScale(300))

Il m'a fallu des heures pour trouver ce message. Merci!

Steven Smith
la source
-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);
Ketan Ramani
la source
Veuillez ne pas publier deux réponses avec le même contenu simplement en raison de votes négatifs.
techydesigner
Et veuillez formater votre code en dépensant un peu d'effort! Pourquoi l'avez-vous tellement indenté à droite? Trop de temps pour supprimer un espace blanc?
Massimiliano Kraus