android Webview底部多余空间的问题答案

【问题标题】：Problem with extra space at the bottom of android Webviewandroid Webview底部多余空间的问题
【发布时间】：2011-08-24 08:41:53
【问题描述】：

我的应用程序中有一个 Webview，我使用 loadData() 方法显示 html 内容。问题是 HTML 内容与底部的一些额外空间一起显示，我不明白为什么会出现空白。此问题仅在 Motorola Milestone 设备 (Android 2.1) 中发生。请有人帮忙解决这个问题。

提前致谢，拉贾潘迪安

【问题讨论】：

标签： android

【解决方案1】：

最后我找到了我自己的问题的答案，我需要将元标记与我的 HTML 内容一起附加，然后再将其添加到 Webview。请在下面找到代码

 String s="<head><meta name='viewport' content='target-densityDpi=device-dpi'/></head>";            
 webview.loadDataWithBaseURL(null,s+htmlContent,"text/html" , "utf-8",null);

元标记内的 Viewport 属性完成了这个技巧，请参阅以下链接了解更多详细信息。

Using Viewport in Android Webview

问候，拉贾潘迪安

【讨论】：

【解决方案2】：

这篇博文解决了我的问题。我认为这会有所帮助。 http://capdroid.wordpress.com/2014/08/07/resizing-webview-to-match-the-content-size/

   private void setupWebView() {
    webView.getSettings().setJavaScriptEnabled(true);
    webView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            webView.loadUrl("javascript:MyApp.resize(document.body.getBoundingClientRect().height)");
            super.onPageFinished(view, url);
        }
    });
    webView.addJavascriptInterface(this, "MyApp");
}

@JavascriptInterface
public void resize(final float height) {
    MyActivity.this.runOnUiThread(new Runnable() {
        @Override
        public void run() {
            webView.setLayoutParams(new LinearLayout.LayoutParams(getResources().getDisplayMetrics().widthPixels, (int) (height * getResources().getDisplayMetrics().density)));
        }
    });
}

【讨论】：

这实际上解决了 4.4+ 上的空白问题，但它也会将 webview 定位到顶部，因此您必须将它定位在该屏幕上的位置

【解决方案3】：

最好也使用宽度属性。因为某些设备会考虑到这一点。

例如：

String s="<head><meta name=viewport content=target-densitydpi=medium-dpi, width=device-width/></head>";

【讨论】：

【解决方案4】：

对于根据接受的答案设置视口但仍有问题的人，请尝试从 WebView 内的页面中的 HTML 和 BODY 中删除 padding 和 margin。如果要保留正文填充，请将box-sizing:border-box 添加到正文标记：

html{
    margin:0;padding:0;
}
body {
    margin:0;
    padding:20px;
    box-sizing:border-box;
}

【讨论】：