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

问题

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 good...

I mean to say the width does not fit to screen size of mobile; it shows out of width.

I am also using these... for <viewport> tag for controlling its presentation.

    WebSettings settings = webview.getSettings();
    settings.setJavaScriptEnabled(true);

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

Also I am using setInitialScale for webview render properly.

    webview.setInitialScale((int) 1.0);

but I am getting the website load not responsive as according to size... it shows the width is outside to screen size... which comes with scroll

Application works fine in Lollipop, Marshmallow etc. But does not work in Jellybean etc. But the Link works well with latest chrome in all devices but does not work in webview.

I also set this....

 <meta name="viewport" content="width=device-width, initial-scale=1">

Screenshot

回答1:

Try This:

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

回答2:

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

try this code may be solve your issue.

回答3:

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

回答4:

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...

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

回答6:

webView = (WebView) findViewById(R.id.noticiasWebView);
webView.setInitialScale(1);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setScrollbarFadingEnabled(false);
webView.loadUrl("http://www.resource.com.br/");

回答7:

Enabling DOM should help I guess

webView.getSettings().setDomStorageEnabled(true);

来源：https://stackoverflow.com/questions/38912036/responsive-website-show-on-web-view-out-of-mobile-widthnot-responsive-other-wa