如何为Webview设置初始缩放/宽度

Question

我试图使 WebView 与 Android 浏览器具有类似的行为。浏览器以一种尝试将页面宽度适应屏幕的方式打开所有页面。然而，WebView 的默认行为是从100％像素比例开始，因此它在左上角缩放。

我花了几个小时的时间寻找一种让 WebView 像浏览器一样将页面缩放到屏幕的方法，但没有任何效果。有人找到了实现这一点的方法吗？

我看到一个叫做 setLoadWithOverviewMode 的设置，但那似乎完全没有作用。我还尝试了 setInitialScale，但在不同的屏幕尺寸和网页尺寸上可能不如浏览器的缩放效果优雅。

有人有任何线索吗？

谢谢

编辑：当手机处于横向时，Brian 的方法似乎有效，但是在纵向时接近但仍无法将整个页面适应屏幕。我发起了这个奖励，希望有一种确定的方法可以在任何方向或屏幕尺寸下使初始缩放适合页面的宽度。

- cottonBallPaws

---

@Sam，是的，下面的被接受的解决方案对我有效。 - cottonBallPaws

由于某种原因，我花了一整天的时间来解决这个问题，最终只在API7及以下版本中才能正常工作。最后不得不使用setInitialScale并手动计算初始比例来实现相同的功能。顺便说一下，我有一张480x800尺寸的单张图片。 - Samuel

在我尝试过的每个设备上都能正常工作，从API级别7到14。 - cottonBallPaws

Answer 1

以下代码会在 Android 2.2 上加载谷歌桌面版主页，并完全缩小以适应一个 854x480 像素的屏幕。当我旋转设备并重新加载时，它每次都可以适应纵向或横向视图。

BrowserLayout.xml:

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

     <WebView android:id="@+id/webview"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent" />
</LinearLayout>

Browser.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();
        }
    }
}

- Brian

---

这是一篇很好的解释。+1 - Tarik

这个解决方案对我也没有起作用。在内容的右侧和底部出现了很多黑色区域。不过，我是从资产文件夹加载图像而不是网页。这可能是原因吗？ - SilithCrowe

非常感谢，您的答案在数小时的搜索后帮助了我 :) - Muhannad A.Alhariri

@SilithCrowe - 我遇到了同样的问题，使用上述代码在四台Android设备中有三台正常工作，但其中一台设备（HTC Desire X）右侧页面是空白的。你找到解决方法了吗？ - Mr. Bungle

谢谢。同时请添加以下代码：browser.setInitialScale(30); - CoolMind

Answer 2

我找到了为什么竖屏视图没有完全填充视口的原因。至少在我的情况下，这是因为滚动条总是显示的。除了上面提供的视口代码之外，尝试添加以下代码：

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

这会使滚动条不占用布局空间，允许网页填充视口。

希望这有所帮助。

- grimmdp

Answer 3

这是一个老问题，但是如果像我这样的人越来越多的话，请让我补充一些细节。

Brian发布的出色答案在我的Jelly Bean上不起作用。我还需要添加：

browser.setInitialScale(30);

参数可以是任何百分比，以确保调整大小后的内容小于Web视图的宽度。然后，设置setUseWideViewPort（true）将内容宽度扩展到Web视图宽度的最大值。

- Ivan BASART

---

我的网页在Webview中显示，包含大量Javascript，更像是电视中的OSD，带有按钮的小部件。我使用了你的解决方案，对此有两点评论：

1. Webview的第一次加载不成功，Webview是黑色的。
2. 第二个问题是正确的，但我可以双击，这是我不想要的，因为它会缩放小部件，按钮就无法工作了。你能提供任何帮助吗？谢谢。

- MartinC

需要注意的是，WebView.setInitialScale(int) 的默认值为0而不是100。文档链接 - DBX12

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

Answer 4

尝试使用宽视口：

（参考链接）。

 webview.getSettings().setUseWideViewPort(true);

- Brian

---

谢谢，那似乎是正确的方向。单独使用它似乎没有任何作用，但与setInitialScale（50）的组合在纵向模式下完美运行。然而，在横向模式下，它无法适应屏幕。除了这个设置之外，我还应该使用其他设置吗？这是我目前拥有的：setBuiltInZoomControls（true），setUseWideViewPort（true），setInitialScale（50）。我希望它能够适应屏幕的大小或密度。再次感谢。 - cottonBallPaws

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

- Ashish Anand

---

你能帮我解决这个问题吗？https://stackoverflow.com/questions/49098464/loading-gif-in-webview-not-adjusting-to-webview - StuartDTO

Answer 6

我正在处理加载图片的问题，并希望将它们缩放到设备的宽度。我发现，在API 19以下（KitKat）版本的旧手机上，Brian答案的行为并不完全符合我的要求。它在旧手机上会在一些图片周围产生大量的空白，但在我的新手机上却能正常工作。这是我的替代方案，得益于这个答案的帮助：Android的WebView可以自动调整巨大的图片吗？ 布局算法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);
}

- Daniel Handojo

Answer 7

如果您已经解决了网页视图问题，但是您的图片仍然不成比例，我发现最好的解决方案（这里）是在文档前面添加以下内容：

<style>img{display: inline; height: auto; max-width: 100%;}</style>

因此，所有图像都会按比例缩放以适应 Web 视图宽度。

- dsalaj

Answer 8

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

- Samir Alakbarov

Answer 9

在Kotlin中，你可以使用以下方法：

webView.isScrollbarFadingEnabled = true
webView.setInitialScale(100)

- Sazzad Hissain Khan