Zoom in WebView to fit webpage's width

Question

The webpage that I need to use has a 320px wide background and everything on the webpage is laid out according to the same width. On devices with larger screens, everything on the webpage appears centered but small.

I've tried everything that I found looking around but nothing seems to work. Things that I've tried are

<meta name="viewport" content="width=320" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, target-densitydpi=device-dpi" />

and several other combinations with

webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

webView.setInitialScale(percent);

I also found a Javascript solution which seems to do the trick but only for the first loaded url. I've failed to figure out anything about why it happens except that it seems onPageStarted() and onPageFinished() are being called twice for the first page.

This is how I've done it

WebView webView = (WebView) findViewById(R.id.webview);

WindowManager manager = (WindowManager) getSystemService(WINDOW_SERVICE);
final DisplayMetrics metrics = new DisplayMetrics();
manager.getDefaultDisplay().getMetrics(metrics);
metrics.widthPixels /= metrics.density;

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        Log.d("url", url);
        view.loadUrl(url);
        return true;
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        Log.d("page", "started " + url);
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        Log.d("page", "finished " + url);

        view.loadUrl("javascript:var scale = " + metrics.widthPixels +
            " / document.body.scrollWidth; document.body.style.zoom = scale;");
    }
});

WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setJavaScriptEnabled(true);

webView.loadUrl(url);

So any ideas?

score 2 · Answer 1 · answered Jan 03 '14 at 06:44

2

In my case..

Put this code to html..

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no" />

And this is all of WebView Settings...

    WebSettings settings = wvContents.getSettings();
    settings.setUseWideViewPort(true);
    settings.setBuiltInZoomControls(true);
    settings.setSupportZoom(true);

    settings.setJavaScriptEnabled(true);
    settings.setLoadWithOverviewMode(true);

That's all! It works fine. I do not do anything in onPageStarted() , onPageFinished. Try my codes and feed back for us. Good Luck bro!

answered Jan 03 '14 at 06:44

cmcromance

2,289
1
25
26

No idea why, but doesn't work. I've put in the exact same code as you but it just doesn't work man. – timemanx Jan 03 '14 at 12:36
@TimeManx Really? hmm... What is the problem with your code? I cannot figure it out. And then, check this page http://developer.android.com/guide/webapps/targeting.html If you get hint from it, let me know about your solution. – cmcromance Jan 06 '14 at 03:49
1

Those meta tags in made iOS emulator load nicely zoomed html for me. thanks! – Uros Dec 11 '19 at 11:51

score 1 · Answer 2 · answered Mar 22 '17 at 05:33

1

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

here user-scalable=no" should be user-scalable=yes"

answered Mar 22 '17 at 05:33

Ali Nur

11
1
2

Zoom in WebView to fit webpage's width

2 Answers2