web-dev-qa-db-ja.com

レスポンシブウェブサイトがモバイル幅外のウェブビューに表示される(レスポンシブではない)他の方法でChrome

レスポンシブウェブサイトを読み込むためにwebviewを使用していますが、モバイルサイズの外側の幅が表示されます。

私はモバイルChromeブラウザでリンクを開きます、そしてそれはよさそうです...

つまり、幅がモバイルの画面サイズに合わないということです。それは幅を超えて表示されます。

私もこれらを使用しています... for <viewport>その表示を制御するためのタグ。

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

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

また、webviewレンダリングにsetInitialScaleを適切に使用しています。

    webview.setInitialScale((int) 1.0);

しかし、サイズに応じてWebサイトの読み込みが応答しなくなりました...幅が画面サイズの外側にあることを示しています...スクロールが付属しています

アプリケーションはLollipop、Marshmallowなどで正常に機能しますが、Jellybeanなどでは機能しません。ただし、リンクはすべてのデバイスで最新のchromeで機能しますが、webviewでは機能しません。

私もこれを設定しました…。

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

スクリーンショット

enter image description here

15
Arjun saini

これを試して:

WebView browser = (WebView) findViewById(R.id.webview);
browser.getSettings().setLoadWithOverviewMode(true);
browser.getSettings().setUseWideViewPort(true);
9
Amy
web.setInitialScale(1);
    web.getSettings().setLoadWithOverviewMode(true);
    web.getSettings().setUseWideViewPort(true);

このコードを試してみると、問題が解決する可能性があります。

5
Nirmit

あなたのウェブビューlayout_width = "match_parent"ですか?

次のものも使用できます: `

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

前:

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

onPageFinished()メソッドで達成できるかもしれません

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

それは時間前に私とうまくいきました。お役に立てれば...

3
Nikhil Borad
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/");
2
Nirmit

これを試してみてくださいそれがあなたを助けることを願っています

    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);
2
Mr. Mad

DOMを有効にすると、推測に役立つはずです

webView.getSettings().setDomStorageEnabled(true);
0
Sebastian