CODEWITHSUNDEEP
javaandroidwebview
iSun
iSun

Reputation: 1754

Scale down WebView initial scale

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?

Upvotes: 3

Views: 572

Answers (2)

Anulal S
Anulal S

Reputation: 6625

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

Upvotes: 1

MariosP
MariosP

Reputation: 9103

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

Upvotes: 1

Related Questions