解决WebView无法缩放页面的问题

Posted 2023-05-01

参考技术A 首先需要从WebView获取到WebSettings，然后通过WebSettings设置WebView相关属性
WebSettings WebSettings = mWebView.getSettings();

我使用WebView加载了本地的html，然后属性设置如下

理论上讲，这样就能让页面支持缩放了，然而事实并非如此。经过一番查找后，发现本地的html文件中设置了如下属性 <meta name="viewport" content="user-scalable=no">
好了，到这里就知道是怎么回事了，html限制了缩放功能，将这里的content 属性修改为 user-scalable=yes 就可以了。

如何设置 webview 的初始缩放/宽度

【中文标题】如何设置 webview 的初始缩放/宽度

【英文标题】：How to set the initial zoom/width for a webview

【发布时间】：2011-04-18 00:52:01

【问题描述】：

我试图让 WebView 具有与 android 浏览器类似的行为。浏览器会以尝试使其宽度适合屏幕的方式打开所有页面。但是，WebView 的默认行为是以 100% 像素比例开始，因此它从左上角开始放大。

过去几个小时我一直在试图找到一种方法让 WebView 像在浏览器中那样将页面缩放到屏幕上，但我没有任何运气。有没有人找到办法做到这一点？

我看到了一个名为 setLoadWithOverviewMode 的设置，但它似乎根本没有做任何事情。我还尝试了 setInitialScale，但在不同的屏幕尺寸和网页尺寸上，它们不会像浏览器缩放那样优雅。

有人有线索吗？

谢谢

编辑：当手机处于横向而不是纵向时，Brian 的方法似乎有效。在纵向它很接近，但仍然不适合页面中的整个屏幕。我开始这个赏金是希望有一种可靠的方法来获得初始缩放以使页面适合任何方向或屏幕尺寸的页面宽度。

【问题讨论】：

你找到解决方案了吗？

@Sam，是的，下面接受的解决方案对我有用。

出于某种原因，我花了一整天的时间来解决这个问题，它只在 api7 中有效，而不是在更高版本中。最后必须使用 setInitialScale 实现相同的功能并手动计算初始比例。顺便说一句，我有一张 480x800 尺寸的图片。

在我尝试过的每台设备上为我工作，从 api 级别 7 到 14。

【参考方案1】：

以下代码加载了完全缩小的桌面版 Google 主页，以适合我在 854x480 像素屏幕上的 Android 2.2 中的webview。当我重新定位设备并以纵向或横向重新加载时，页面宽度每次都完全适合视图。

BrowserLayout.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_
    android:layout_>

     <WebView android:id="@+id/webview"
         android:layout_
         android:layout_ />
</LinearLayout>

浏览器.java：

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class Browser extends Activity 

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.BrowserLayout);

        String loadUrl = "http://www.google.com/webhp?hl=en&output=html";

        // initialize the browser object
        WebView browser = (WebView) findViewById(R.id.webview);

        browser.getSettings().setLoadWithOverviewMode(true);
        browser.getSettings().setUseWideViewPort(true);

        try 
            // load the url
            browser.loadUrl(loadUrl);
         catch (Exception e) 
            e.printStackTrace();
        
    

【讨论】：

感谢布赖恩，乍一看似乎可以正常工作。在奖励赏金之前，我将测试更多网站，但这看起来很有希望！

这是一个很好的前解释。 +1

它对我不起作用。页面加载后似乎设置了缩放

这很好......人们是如何想出这些解决方案的？反复试验，还是你有一些神圣的书籍？

这个解决方案也对我不起作用。我在内容的右侧和底部有很多黑色空间。不过，我正在从资产文件夹而不是网页加载图像。这可能是为什么？

【参考方案2】：

我知道为什么纵向视图没有完全填满视口。至少在我的情况下，这是因为滚动条总是显示。除了上面的视口代码，尝试添加：

    browser.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
    browser.setScrollbarFadingEnabled(false);

这会导致滚动条不占用布局空间，并允许网页填满视口。

希望对你有帮助

【参考方案3】：

这是个老问题，但让我补充一点，以防更多像我一样的人来到这里。

Brian 发布的出色答案在 Jelly Bean 中对我不起作用。我还要补充：

browser.setInitialScale(30);

该参数可以是任何百分比 tha 完成调整后的内容小于 webview 宽度。然后 setUseWideViewPort(true) 将内容宽度扩展到 webview 宽度的最大值。

【讨论】：

我在 webview 中显示的网页由很多 Javascript 组成，它更像是电视中的 OSD，带有按钮的小部件。我使用了你的解决方案，我有 2 个 cmets： 1. 第一次加载 webview 不成功，webview 是黑色的 2. 第二个是正确的，但我可以双击，这是我不想要的，因为它可以缩放然后小部件和按钮停止工作。你能提供什么帮助吗？谢谢。

需要注意的是，WebView.setInitialScale(int)的默认值是0而不是100。Link to Documentation

谢谢，它有帮助。我尝试了 5%、10%、30% 和 70%。在 70 的情况下，它将大页面的大小调整为 70%，因此出现了滚动条。在 5-30% 的情况下，它会正常调整页面大小。

【参考方案4】：

试试using a wide viewport:

 webview.getSettings().setUseWideViewPort(true);

【讨论】：

谢谢，这似乎是正确的方向。这本身似乎并没有做任何事情，但是结合 setInitialScale(50) 它在纵向上完美地工作。但是，横向握住手机，它不适合屏幕。除了那个，我还应该使用其他设置吗？这是我目前拥有的：setBuiltInZoomControls(true)、setUseWideViewPort(true)、setInitialScale(50)。无论屏幕的大小或密度如何，我都希望它能够很好地适应屏幕。再次感谢。

【参考方案5】：

//对于图片和swf视频，宽度为“100%”，高度为“98%”

mWebView2.getSettings().setJavaScriptEnabled(true);
mWebView2.getSettings().setLoadWithOverviewMode(true);
mWebView2.getSettings().setUseWideViewPort(true);
mWebView2.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView2.setScrollbarFadingEnabled(true);

【讨论】：

你能帮我解决这个问题吗***.com/questions/49098464/…

【参考方案6】：

我正在为此答案加载图像，我希望它们被缩放到设备的宽度。我发现，对于版本低于 API 19 (KitKat) 的旧手机，Brian 回答的行为并不像我喜欢的那样。它在旧手机上的一些图像周围放置了很多空白，但适用于我的新手机。这是我的替代方案，在这个答案的帮助下：Can Android's WebView automatically resize huge images? 布局算法SINGLE_COLUMN 已被弃用，但它可以工作，我觉得它适合使用较旧的 webview。

WebSettings settings = webView.getSettings();

// Image set to width of device. (Must be done differently for API < 19 (kitkat))
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) 
    if (!settings.getLayoutAlgorithm().equals(WebSettings.LayoutAlgorithm.SINGLE_COLUMN))
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
 else 
    if (!settings.getLoadWithOverviewMode()) settings.setLoadWithOverviewMode(true);
    if (!settings.getUseWideViewPort()) settings.setUseWideViewPort(true);

【参考方案7】：

如果您已经确定了网络视图，但您的图像仍然超出比例，我发现的最佳解决方案 (here) 只是在文档前添加：

<style>imgdisplay: inline; height: auto; max-width: 100%;</style>

因此，所有图像都被缩放以匹配网络视图宽度。

【参考方案8】：

在Kotlin中可以使用，

webView.isScrollbarFadingEnabled = true
webView.setInitialScale(100)

【参考方案9】：

您可以使用 Mozilla 的 GeckoView 库轻松实现这一目标。您可以使用它来代替WebView。但这种方法的一大缺点是这个库大约 50 MB 大小。