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 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?

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

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.

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!

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 .

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

Tout ce que vous avez à faire est simplement

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

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

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

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.

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>

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

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

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.

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.

int PIC_WIDTH= webView.getRight()-webView.getLeft();

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.

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

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

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

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!

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