web-dev-qa-db-ja.com

Android Webview-Webページはデバイスの画面に収まる必要があります

デバイスの画面サイズに基づいてWebページに合わせて次のことを試しました。

mWebview.setInitialScale(30);

メタデータビューポートを設定します

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
<meta name="viewport" content="width=device-width, target-densityDpi=medium-dpi"/>

しかし、何も機能しません。ウェブページはデバイスの画面サイズに固定されていません。

誰もこれを取得する方法を教えてもらえますか？

androidwebviewscalingandroid-webview
94
SWDeveloper

30に設定するのではなく、手動で使用する必要があるスケールを計算する必要があります。

private int getScale(){
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    int width = display.getWidth(); 
    Double val = new Double(width)/new Double(PIC_WIDTH);
    val = val * 100d;
    return val.intValue();
}

次に使用する

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());
80
danh32

これを使用できます

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

これにより、画面サイズに基づいてサイズが修正されます。

269
Tushar Vengurlekar

友達、

私はあなたから多くのインポートと素晴らしい情報を見つけました。しかし、私のために働く唯一の方法はこの方法でした：

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

会社のデバイスの種類のため、Android 2.1に取り組んでいます。しかし、それぞれの情報の一部を使用して問題を修正しました。

ありがとうございます！

30
Josmar Peixe

これらの設定は私のために働いた：

wv.setInitialScale(1);
wv.getSettings().setLoadWithOverviewMode(true);
wv.getSettings().setUseWideViewPort(true);
wv.getSettings().setJavaScriptEnabled(true);

setInitialScale（1）は私の試みでは欠落していました。

setUseWideViewPortがtrueに設定されているがが機能しなかった場合、ドキュメンテーションにはが完全にズームアウトされると書かれていますが私と私は1を設定する必要がありました。

25
Doc

このHTML5のヒントを試してください

http://www.html5rocks.com/en/mobile/mobifying.html

Androidバージョンが2.1以上の場合、これで

  WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
25
josebetomex

あなたがする必要があるのは、単に

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
15
Muhammad Aamir Ali

これらは私のために機能し、WebViewを画面幅に合わせます：

// get from xml, with all size set "fill_parent"  
webView = (WebView) findViewById(R.id.webview_in_layout);  
// fit the width of screen
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 
// remove a weird white line on the right size
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

上記のアドバイスと Eclipse Webビューの白い線 に感謝します

13
Nezneika

このコードを使用すると同じ問題が発生します

webview.setWebViewClient(new WebViewClient() {
}

あなたのコードでremove it
そして、ウェブビューに以下の3つのモードを追加することを忘れないでください

    webview.getSettings().setJavaScriptEnabled(true);  
    webview.getSettings().setLoadWithOverviewMode(true);
    webview.getSettings().setUseWideViewPort(true);

これは、画面サイズに基づいてサイズを修正します

11
Linh
WebView browser = (WebView) findViewById(R.id.webview);
browser.getSettings().setLoadWithOverviewMode(true);
browser.getSettings().setUseWideViewPort(true);
browser.getSettings().setMinimumFontSize(40);

.setLoadWithOverViewModeと.setUseWideViewPortによってテキストサイズが本当に小さく設定されているので、これは私にとって非常に効果的です。

6
Steve

この場合、webViewでHTMLを使用する必要があります。私は次のコードを使用してこれを解決しました

webView.loadDataWithBaseURL(null,
                "<!DOCTYPE html><html><body style = \"text-align:center\"><img src= "
                        + \"http://www.koenvangorp.be/photos/2005_09_16-moon_2000.jpg\"
                        + " alt=\"pageNo\" width=\"100%\"></body></html>",
                "text/html", "UTF-8", null);
5
Qadir Hussain

これはXMLの問題のようです。 Webビューを含むXMLドキュメントを開きます。上部のパディングコードを削除します。

次にレイアウトで、追加します

Android:layout_width="fill_parent"
Android:layout_height="fill_parent"

Webビューで、追加します

Android:layout_width="fill_parent"
Android:layout_height="fill_parent"

これにより、Web-Viewがデバイス画面に適合します。

4
ZakiHacky

Display.getWidth（）;以降のdanh32による回答の変更廃止されました。

private int getScale(){
    Point p = new Point();
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    display.getSize(p);
    int width = p.x; 
    Double val = new Double(width)/new Double(PIC_WIDTH);
    val = val * 100d;
    return val.intValue();
}

次に使用する

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());
4
Ducktales

私はhtml文字列のビデオを持っていて、Webビューの幅は画面の幅よりも大きく、これは私のために働いています。

これらの行をHTML文字列に追加します。

<head>
<meta name="viewport" content="width=device-width">
</head>

上記のコードをHTML文字列に追加した後の結果：

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width">
</head>


</html>
3
Biljana Divljak

DisplayオブジェクトのgetWidthメソッドは非推奨です。 onSizeChangedをオーバーライドして、WebViewが使用可能になったときにサイズを取得します。

WebView webView = new WebView(context) {

    @Override
    protected void onSizeChanged(int w, int h, int ow, int oh) {

        // if width is zero, this method will be called again
        if (w != 0) {

            Double scale = Double.valueOf(w) / Double.valueOf(WEB_PAGE_WIDTH);

            scale *= 100d;

            setInitialScale(scale.intValue());
        }

        super.onSizeChanged(w, h, ow, oh);
    }
};
2
SharkAlley
webview.setInitialScale(1);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setJavaScriptEnabled(true);

動作しますが、次のようなものを削除することを忘れないでください：

<meta name="viewport" content="user-scalable=no"/>

htmlファイルに存在する場合、またはuser-scalable = yesを変更する場合は、そうしません。

2
Hoang Huu
int PIC_WIDTH= webView.getRight()-webView.getLeft();
2
john

理論的には、次の組み合わせ：

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);

と

settings.setUseWideViewPort(false)

問題を修正し、コンテンツをラップして画面に合わせます。しかし、NARROW_COLUMNSは廃止されました。問題を詳細に調査する以下のスレッドを読むことをお勧めします。 https://code.google.com/p/Android/issues/detail?id=62378

1
Alécio Carvalho

これは、Webページに従ってエミュレータを調整するのに役立ちます。

WebView wb;
//CALL THIS METHOD
wb.setInitialScale(50);

上記のように、初期スケールをパーセンテージで設定できます。

1
jagadeesh
  • setLoadWithOverviewMode(true)-完全にズームアウトされたWebViewをロードします
  • setUseWideViewPort(true)は、Webviewに通常のビューポート（通常のデスクトップブラウザーなど）を持たせますが、falseの場合、webviewには独自の寸法に制限されたビューポートがあります（したがって、webviewが50px * 50pxの場合、ビューポートは同じサイズになります）

続きを読む こちら

WebViewの所有者ではない状況がありました。また、ページが終了した後にWebViewのサイズを変更したため、ズームに何らかの副作用がありました。私の解決策は次のとおりです。

webView.post(new Runnable() {
    @Override
    public void run() {
        webView.getSettings().setLoadWithOverviewMode(true);
    }
});
0
yoAlex5

@ danh32の回答に基づいた、廃止されたメソッドを使用していない更新版を以下に示します。

protected int getScale(Double contentWidth) {
    if(this.getActivity() != null) {
        DisplayMetrics displaymetrics = new DisplayMetrics();
        this.getActivity().getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        Double val = displaymetrics.widthPixels / contentWidth * 100d;
        return val.intValue();
    } else {
        return 100;
    }
}

同様に使用されます：

int initialScale = this.getScale(420d);
this.mWebView.setInitialScale(initialScale);
0
Martin Zeitler