Geek Answers Handbook

The problem with the extra space at the bottom of the Android browser

I have a Webview application in my application where I display html content using the loadData () method. The problem is that the HTML content is displayed along with some extra space at the bottom, I could not understand why the empty space was approaching. This issue only occurs on a Motorola Milestone device (Android 2.1). Please help solve this problem.

enter image description here

Thanks, Advance, Rajapandian

+8
android
source share
3 answers

Finally, I found the answer to my question, I need to add a meta tag along with my HTML content before adding it to Webview. Code below

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

The Viewport property inside the meta tag did the trick. See the following link for more information.

Using Viewport in an Android Web Browser

Regards, Rajapandi

+13
source share

This blog post resolved my issue. I think this will help. 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))); } }); }
+2
source share

It is also better to use the use width property. As some devices consider this.

eg:

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

More articles:


All Articles