CODEWITHSUNDEEP
androidwebview
Vierda Mila Nartila
Vierda Mila Nartila

Reputation: 613

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.

Upvotes: 7

Views: 29169

Answers (3)

MEGHA RAMOLIYA
MEGHA RAMOLIYA

Reputation: 1917

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

Upvotes: 2

The Reptilian Army
The Reptilian Army

Reputation: 478

This worked for me:

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

Upvotes: 17

Vierda Mila Nartila
Vierda Mila Nartila

Reputation: 613

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.

Upvotes: 15

Related Questions