Responsive website show on Web view out of mobile width(Not Responsive) other way in Chrome Looks Good

Question

I am using webview to load the responsive website but it shows the width outside to the mobile size.

I open the link in a mobile Chrome browser and it looks

Answer 1

May be you can achieve with onPageFinished() method

@Override
public void onPageFinished(android.webkit.WebView view, String url)
{
    super.onPageFinished(view, url);

    WindowManager manager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);

    DisplayMetrics metrics = new DisplayMetrics();
    manager.getDefaultDisplay().getMetrics(metrics);

    metrics.widthPixels /= metrics.density;

    wb.loadUrl("javascript:document.body.style.zoom = "+String.valueOf(scale)+";");

OR//
    wb.loadUrl("javascript:var scale = " + metrics.widthPixels + " / document.body.scrollWidth; document.body.style.zoom = scale;");
}

it worked fine with me time ago. Hope this helps...

Answer 2

Try This:

WebView browser = (WebView) findViewById(R.id.webview);
browser.getSettings().setLoadWithOverviewMode(true);
browser.getSettings().setUseWideViewPort(true);

Answer 3

web.setInitialScale(1);
    web.getSettings().setLoadWithOverviewMode(true);
    web.getSettings().setUseWideViewPort(true);

try this code may be solve your issue.

Answer 4

Enabling DOM should help I guess

webView.getSettings().setDomStorageEnabled(true);

Answer 5

try this one hope it will help you

    String link = "";// global variable
    Resources res;// global variable
         //in onCreate
    res = ctx.getResources();
    link = url;

    faqwebview.getSettings().setJavaScriptEnabled(true);
    faqwebview.setWebViewClient(new WebViewClient() {

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            // TODO Auto-generated method stub
            super.onPageStarted(view, url, favicon);
            if (!loading) {
                loading=true;
                Utils.ShowMyprogress(this, "Fetching data...");
            }
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            // TODO Auto-generated method stub
            super.onPageFinished(view, url);
            Utils.DismissMyprogress();
            loading=false;
        }

        @Override
        public void onReceivedError(WebView view, int errorCode,
                String description, String failingUrl) {
            // TODO Auto-generated method stub
            super.onReceivedError(view, errorCode, description, failingUrl);
            Utils.DismissMyprogress();
            Utils.showToast(this, "error in load page==" + description);
        }
    });



    faqwebview.loadUrl((link == null || link.isEmpty()) ? res
            .getString(R.string.app_baseurl) : link);

Answer 6

is your web view layout_width="match_parent"?

you can also use:`

setting.setBuiltInZoomControls(true);
webView.setWebViewClient(new WebViewClient());
webView.setWebChromeClient(new WebChromeClient());

before:

settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);