缩小 WebView 初始比例答案

【问题标题】：Scale down WebView initial scale缩小 WebView 初始比例
【发布时间】：2021-02-02 22:32:47
【问题描述】：

我想按比例缩小我的WebView 初始比例，如以下视口配置：

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

但是这个视口被WebView 忽略并呈现为全比例，这是我的WebView 设置但没有成功：

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

有什么想法可以做到这一点吗？

【问题讨论】：

您正在使用user-scalable=no" 取消放大/缩小。不带它试试看。
@tukan 无法更改这一点，因为我无权访问源网页，但是这在带有 initial-scale=0.93 参数的 ios safari 上运行良好！
它可能有效，因为它忽略了user-scalable。如果您没有来源，那么我没有想法。
我会尝试zoomBy(93) 或setLayoutParams(new ViewGroup.LayoutParams((int)(width/100F*93),(int)(height/100F*93))。

标签： java android webview

【解决方案1】：

当您使用 user-scalable=no 时，缩放功能被禁用。如果您无权从网页源更改此设置，唯一可能的解决方案是在页面加载完成后使用 Javascript 更改 Viewport Content 属性。为此，您必须设置 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);

【讨论】：

【解决方案2】：

作为替代方案，我们可以在这里尝试 CSS。

添加课程以缩小规模，并在完成或不再需要缩小规模后删除课程。

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

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

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

</body>
</html>

您可以按照here指定的方式注入CSS

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

【讨论】：