CODEWITHSUNDEEP
androidandroid-webviewviewportwebviewclientandroid-websettings
timemanx
timemanx

Reputation: 4523

Zoom in WebView to fit webpage's width

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?

Upvotes: 0

Views: 7329

Answers (2)

Ali Nur
Ali Nur

Reputation: 11

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

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

Upvotes: 1

cmcromance
cmcromance

Reputation: 2289

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!

Upvotes: 2

Related Questions