缩小 WebView 初始比例

Question

我想缩小我的 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);

有什么想法可以实现吗？

Answer 1

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

Answer 2

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

添加 class 以缩小并在完成或不再需要缩小后删除 class。

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

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

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

</body>
</html>

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

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

缩小 WebView 初始比例

Scale down WebView initial scale

java

android

webview