Question

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

我花了最近几个小时试图找到一种方法让WebView将页面缩放到屏幕上，就像在浏览器中一样，但我没有运气。有人找到了实现这个目标的方法吗？

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

任何人都有任何线索？

由于

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

Answer 1

以下代码在854x480像素的屏幕上加载完全缩小的Google主页的桌面版，以适应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_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();
        }
    }
}

Answer 2

我弄清楚为什么肖像视图没有完全填满视口。至少在我的情况下，这是因为滚动条始终显示。除了上面的视口代码，请尝试添加：

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

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

希望这有帮助

Answer 3

这是一个古老的问题，但是让我添加一个细节，以防更多像我这样的人来到这里。

Brian发布的优秀答案在Jelly Bean中并不适合我。我还要补充一下：

browser.setInitialScale(30);

参数可以是实现调整大小的内容小于webview宽度的任何百分比。然后setUseWideViewPort（true）将内容宽度扩展到webview宽度的最大值。

Answer 4

尝试using a wide viewport：

 webview.getSettings().setUseWideViewPort(true);

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

Answer 6

我正在为此答案加载图片，我希望将它们缩放到设备的宽度。我发现，对于版本低于API 19（KitKat）的旧款手机，Brian的答案行为并不像我喜欢的那样。它在旧手机上的某些图像周围放了很多空白，但是在我的新手机上运行。以下是我的替代方案，在此答案的帮助下：Can Android's WebView automatically resize huge images?不推荐使用布局算法SINGLE_COLUMN，但它确实有用，我觉得它适合处理较旧的网络视图。

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

Answer 7

如果您已经找到了Web视图，但是图像仍然超出比例，那么我发现的最佳解决方案（here）只是在文档前添加了：

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

结果，所有图像都会缩放以匹配Web视图的宽度。

Answer 8

在科特林中，您可以使用

webView.isScrollbarFadingEnabled = true
webView.setInitialScale(100)

Answer 9

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

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

9 个答案: