Scale down WebView initial scale

Question

I want to scale down my WebView initial scale like to following viewport config:

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

But this viewport ignored by WebView and rendered as full scale, here is my WebView setting with no success:

    mWebView.getSettings().setLoadWithOverviewMode(true);
    mWebView.getSettings().setUseWideViewPort(true);
    mWebView.setInitialScale(93);

Any ideas how to accomplished this?

You are using `user-scalable=no"` which cancels the zoom in/out. Try it without it. — tukan, Feb 05 '21 at 08:33
@tukan Can't change this, because I don't have access to source web-page, however this works fine on ios safari with `initial-scale=0.93` param! — iSun, Feb 06 '21 at 00:00
It probably works because it ignores the `user-scalable`. If you don't have the source then I'm out of ideas. — tukan, Feb 06 '21 at 15:46
I would try `zoomBy(93)` or `setLayoutParams(new ViewGroup.LayoutParams((int)(width/100F*93),(int)(height/100F*93))`. — Darkman, Feb 06 '21 at 15:56

score 1 · Accepted Answer · answered Feb 09 '21 at 08:36

When you use user-scalable=no the ability to zoom is disabled. If you don't have access to change this from the web page source the only possible solution is to change the Viewport Content property using Javascript when the page is finished loaded. To allow this you have to set setJavaScriptEnabled(true);

webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient(){
 @Override
 public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);
    //Option 1: change the viewport content after the page is finished loaded and set initial-scale=0.93 and user-scalable=yes
    view.loadUrl("javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'width=device-width, initial-scale=0.93, maximum-scale=0.93, user-scalable=yes');");

    //Option 2: change the body zoom style to the initial value you want eg: 0.93 (93%)
    //view.loadUrl("javascript:document.body.style.zoom = "+String.valueOf(0.93)+";");
  }
 });
//load the url
webView.loadUrl(url);

Anulal S · Answer 2 · 2021-02-12T09:32:09.517

1

As an alternative, we can try CSS here.

Add class to scale down & remove the class once you are done or no longer needed scale down.

.scale-down {
      transform: scale(0.93);
}

<html>
<body class="scale-down" >

    <h2>I am scaled down to 93/100</h2>

</body>
</html>

You can inject the CSS as specified here

<body style="transform: scale(0.93);">

edited Feb 12 '21 at 09:32

answered Feb 11 '21 at 21:03

Anulal S

6,534
5
26
33

Scale down WebView initial scale

2 Answers2