Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android WebView fit content to screen

I'm trying to fit webview content with screen but it display very ugly and show different results, please see below link for screen capture :

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

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

Please find below my code :

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);

Kindly advise what should I do to fit content nicely? Really appreciate for any kind help.

like image 942
Vierda Mila Nartila Avatar asked Aug 22 '14 05:08

Vierda Mila Nartila


2 Answers

This worked for me:

webview.Settings.LoadWithOverviewMode = true;
webview.Settings.UseWideViewPort = true;
like image 101
The Reptilian Army Avatar answered Sep 19 '22 04:09

The Reptilian Army


I think I have found my own solution, I put here for someone who need it in future. I just create one method to change head of 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;
    }

And I'm using it inside webview as follow :

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);
}

So my content in webview now is fit to device and can show nicely.

like image 22
Vierda Mila Nartila Avatar answered Sep 18 '22 04:09

Vierda Mila Nartila