Question

我试图在WebView中显示一些html内容（从一个网络服务收到，所以我无法控制），我无法让它适应屏幕的宽度，没有水平滚动（正常文本大小和图像宽度大于屏幕大小以适应屏幕宽度）。

图像非常大：1000 x 1000px。

我有minSdkVersion 15和targetSdkVersion 19并使用4.4.4在Nexus 4上进行测试。

我怎样才能实现这一目标？以下是我在互联网上找到的解决方案所尝试的一切。

String html = "<p><b>bla bla bla> ... <p><figure class=\"module images
    non-editable full\"><img class=\"full\" title=\"Image title\"
    src=\"\/assets\/theimage.jpg\" alt=\"bla bla \">
    <figcaption>bla bla<\/figcaption><\/figure><\/p>";

WebView webview = (WebView) getView().findViewById(R.id.webview);
webview.getSettings().setJavaScriptEnabled(true);

测试1

webview.loadDataWithBaseURL(Config.URL_ROOT, html, "text/html", "utf-8", null);

文字大小合适，但图片没有调整大小，我必须水平滚动才能看到它。

测试2

webview.getSettings().setUseWideViewPort(true);
webview.loadDataWithBaseURL(Config.URL_ROOT, html, "text/html", "utf-8", null);

与测试1相同。

测试3

webview.getSettings().setLoadWithOverviewMode(true);
webview.loadDataWithBaseURL(Config.URL_ROOT, html, "text/html", "utf-8", null);

与测试1相同。

测试4

webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);
webview.loadDataWithBaseURL(Config.URL_ROOT, html, "text/html", "utf-8", null);

文字较小，图像宽度小于测试1，但仍比屏幕宽。

测试5

html = "<!DOCTYPE html>" +
            "<html>" +
            "<head>" +
            "<meta name='viewport' content='width=device-width, user-scalable=no'/>" +
            "<title>Viewport Test</title>" +
            "</head>" +
            "<body style=\"margin: 0px;\">" +
            "<div>" +
            html +
            "</div>" +
            "</body>" +
            "</html>";

webview.getSettings().setUseWideViewPort(true);
webview.loadDataWithBaseURL(Config.URL_ROOT, html, "text/html", "utf-8", null);

与测试1相同，但根据doc：

"(this) <meta> tag specifies that the viewport width should exactly match the
device screen's width and that the ability to zoom should be disabled"

如何使WebView中的html内容适合屏幕的宽度？

0 个答案: