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?

Answer 1

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!

Answer 2

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

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