77

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

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

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

任何人有任何线索？

谢谢

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

4

9 回答 9

162

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

浏览器布局.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>

浏览器.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();
        }
    }
}
于 2010-12-01T07:44:36.030 回答
20

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

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

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

希望这可以帮助

于 2011-07-06T02:56:14.340 回答
12

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

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

browser.setInitialScale(30);

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

于 2013-02-05T11:04:39.763 回答
7

尝试使用宽视口：

 webview.getSettings().setUseWideViewPort(true);
于 2010-09-28T03:21:25.907 回答
3

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

mWebView2.getSettings().setJavaScriptEnabled(true);
mWebView2.getSettings().setLoadWithOverviewMode(true);
mWebView2.getSettings().setUseWideViewPort(true);
mWebView2.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView2.setScrollbarFadingEnabled(true);
于 2011-06-28T06:23:28.300 回答
1

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

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);
}
于 2016-02-06T06:58:28.853 回答
0

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

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

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

于 2019-02-20T07:09:38.830 回答
0

在Kotlin中你可以使用，

webView.isScrollbarFadingEnabled = true
webView.setInitialScale(100)
于 2019-10-23T08:52:52.167 回答
0

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

于 2021-05-03T20:42:35.630 回答