安卓WebView如何适应屏幕大小

Question

安卓WebView如何适应屏幕大小

androidwebview

7

我正在尝试将Webview内容与屏幕匹配，但它显示得非常丑陋，并显示不同的结果，请查看以下链接以获取屏幕截图：

http://postimg.org/image/jy0g268p1/0294ca52/

http://postimg.org/image/603z8qhab/e06b655e/

请查看下面的代码：

WebSettings settings = webView.getSettings();
    settings.setMinimumFontSize(30);
    settings.setLoadWithOverviewMode(true);
    settings.setUseWideViewPort(true);
    settings.setBuiltInZoomControls(true);
    settings.setSupportZoom(true); 

    webView.loadData(htmlContent,  "text/html", "UTF-8");
    webView.setInitialScale(1);
    webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

请问我该如何使内容适应得更好呢？非常感谢您的帮助。

- Vierda Mila Nartila

您的内容需要进行格式化。 - KOTIOS

你需要将布局参数指定为"fill_parent"，"fill_parent"才能实现相同的效果。 - Techfist

@Techfist 是的，我已经在我的布局中将宽度和高度都设置为match_parent。 - Vierda Mila Nartila

@DIVA，你的意思是我需要像这个教程中描述的那样放置一些元标记吗？http://developer.android.com/guide/webapps/targeting.html，并将user-scalable的值设置为yes吗？ - Vierda Mila Nartila

在谷歌上搜索响应式网页设计，或者您可以在 Webview 中使用缩放功能。 - KOTIOS

显示剩余3条评论

3个回答

15

我想我已经找到了自己的解决方案，我在这里分享给将来需要的人。我只是创建了一个方法来更改html的头：

我认为我已经找到了自己的解决方案，我在此分享给未来需要的人。我只需创建一个方法来更改html的标题：

public static String changedHeaderHtml(String htmlText) {

        String head = "<head><meta name=\"viewport\" content=\"width=device-width, user-scalable=yes\" /></head>";

        String closedTag = "</body></html>";
        String changeFontHtml = head + htmlText + closedTag;
        return changeFontHtml;
    }

我将其在Webview中使用，如下：

public static void displayHtmlText(String htmlContent, String message,
        WebView webView,
        RelativeLayout videoLayout, LinearLayout standardLayout, LinearLayout webviewLayout){

    WebSettings settings = webView.getSettings();
    settings.setMinimumFontSize(18);
    settings.setLoadWithOverviewMode(true);
    settings.setUseWideViewPort(true);
    settings.setBuiltInZoomControls(true);
    settings.setDisplayZoomControls(false);

    webView.setWebChromeClient(new WebChromeClient());
    String changeFontHtml = Util.changedHeaderHtml(htmlContent);
    webView.loadDataWithBaseURL(null, changeFontHtml,
            "text/html", "UTF-8", null);

    webviewLayout.setVisibility(View.VISIBLE);
    standardLayout.setVisibility(View.GONE);
    videoLayout.setVisibility(View.GONE);
}

所以我的 webview 内容现在适合设备，并且可以显示得很好。

- Vierda Mila Nartila

1

这个解决方案有点像是一个hack...但是对我来说确实是唯一真正有效的，更准确地说，是html部分。Html头部分可能需要更加小心地“注入”到现有的html中。 - Pascal

2

I have create my own method with set background color and font color also.

 WebSettings settings = desc.getSettings();
            settings.setMinimumFontSize(50);
            desc.getSettings().setJavaScriptEnabled(true);
            settings.setLoadWithOverviewMode(true);
            settings.setUseWideViewPort(true);
            settings.setBuiltInZoomControls(true);
            settings.setDisplayZoomControls(false);

            desc.setWebChromeClient(new WebChromeClient());
            String changeFontHtml = changedHeaderHtml(description);
            desc.setBackgroundColor(context.getResources().getColor(R.color.all_app_bg_color));
            desc.loadDataWithBaseURL(null, changeFontHtml,"text/html", "UTF-8", null);
            desc.setWebViewClient(new WebViewClient() {
                public void onPageFinished(WebView view, String url) {
                    view.loadUrl("javascript:document.body.style.setProperty(\"color\", \"white\");"
                    );
                }
            });


    public static String changedHeaderHtml(String htmlText) {

            String head = "<head><meta name=\"viewport\" content=\"width=device-width, user-scalable=yes\" /></head>";

            String closedTag = "</body></html>";
            String changeFontHtml = head + htmlText + closedTag;
            return changeFontHtml;
        }

- MEGHA DOBARIYA

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- The Reptilian Army · Accepted Answer

这对我起作用：

webview.Settings.LoadWithOverviewMode = true;
webview.Settings.UseWideViewPort = true;