web-dev-qa-db-ja.com

WebViewの初期ズーム/幅を設定する方法

Androidブラウザと同様の動作をWebViewにしようとしています。ブラウザは、画面に幅を合わせようとする方法ですべてのページを開きます。ただし、 WebViewは100％ピクセルスケールで開始するため、左上隅でズームインが開始されます。

過去数時間、WebViewを使用してブラウザのようにページを画面に拡大する方法を見つけようとしましたが、運がありません。誰かがこれを達成する方法を見つけましたか？

SetLoadWithOverviewModeと呼ばれる設定が表示されますが、それは何もしないようです。また、setInitialScaleを試しましたが、ブラウザーのスケーリングほど優雅ではないさまざまな画面サイズとWebページサイズを使用しました。

誰かがリードを持っていますか？

ありがとう

編集：ブライアンの方法は、携帯電話が横向きの場合に機能するようですが、縦向きではありません。ポートレートでは近いが、それでもページの画面全体に収まらない。この賞金は、あらゆる方向や画面サイズでページの幅に合わせて最初のズームを取得する確実な方法があることを期待して始めました。

androidwebviewwidthscaleandroid-webview
73
cottonBallPaws

次のコードは、854x480ピクセルの画面でAndroid 2.2）のwebviewに収まるように完全にズームアウトしたデスクトップ版のGoogleホームページをロードします。デバイスの向きを変えて、ポートレートまたはランドスケープでリロードされ、ページ幅は毎回ビュー内に完全に収まります。

BrowserLayout.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:orientation="vertical"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent">

     <WebView Android:id="@+id/webview"
         Android:layout_width="fill_parent"
         Android:layout_height="fill_parent" />
</LinearLayout>

Browser.Java：

import Android.app.Activity;
import Android.os.Bundle;
import Android.webkit.WebView;

public class Browser extends Activity {

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.BrowserLayout);

        String loadUrl = "http://www.google.com/webhp?hl=en&output=html";

        // initialize the browser object
        WebView browser = (WebView) findViewById(R.id.webview);

        browser.getSettings().setLoadWithOverviewMode(true);
        browser.getSettings().setUseWideViewPort(true);

        try {
            // load the url
            browser.loadUrl(loadUrl);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
155
Brian

ポートレートビューがビューポートを完全に埋めていない理由を見つけました。少なくとも私の場合、スクロールバーが常に表示されていたからです。上記のビューポートコードに加えて、これを追加してみてください：

    browser.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
    browser.setScrollbarFadingEnabled(false);

これにより、スクロールバーはレイアウトスペースを占有せず、Webページがビューポートを埋めることができます。

お役に立てれば

20
Dean

これは昔の質問ですが、私のような人がここに来た場合に備えて詳細を追加します。

ブライアンが投稿した優れた回答は、ジェリービーンではうまくいきません。私も追加する必要があります：

browser.setInitialScale(30);

パラメーターは、サイズ変更されたコンテンツがWebビューの幅よりも小さいことを達成する任意の割合にすることができます。次に、setUseWideViewPort（true）は、コンテンツの幅をWebビューの最大幅まで拡張します。

13
Ivan BASART

広いビューポートを使用 ：

 webview.getSettings().setUseWideViewPort(true);
7
Brian

//画像とswfビデオの場合、幅を「100％」、高さを「98％」として使用

mWebView2.getSettings().setJavaScriptEnabled(true);
mWebView2.getSettings().setLoadWithOverviewMode(true);
mWebView2.getSettings().setUseWideViewPort(true);
mWebView2.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView2.setScrollbarFadingEnabled(true);
3
Ashish Anand

私はこの答えのために画像の読み込みに取り組んでおり、それらをデバイスの幅に合わせてスケーリングしたいです。 API 19（KitKat）より前のバージョンの古い携帯電話では、Brianの答えの振る舞いは私が思うほどではありません。古い携帯電話のいくつかの画像の周りに多くの空白を置きますが、私の新しい携帯電話では動作します。この回答の助けを借りて、ここに私の選択肢があります： AndroidのWebViewは自動的に巨大な画像のサイズを変更できますか？ レイアウトアルゴリズムSINGLE_COLUMNは非推奨ですが、機能します。古いWebビューでの作業に適していると思います。

WebSettings settings = webView.getSettings();

// Image set to width of device. (Must be done differently for API < 19 (KitKat))
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KitKat) {
    if (!settings.getLayoutAlgorithm().equals(WebSettings.LayoutAlgorithm.SINGLE_COLUMN))
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
} else {
    if (!settings.getLoadWithOverviewMode()) settings.setLoadWithOverviewMode(true);
    if (!settings.getUseWideViewPort()) settings.setUseWideViewPort(true);
}
1
Fire3galaxy

あなたがウェブビューを理解しているが、あなたの画像がまだスケール外である場合、私が見つけた最良の解決策（ here ）は単に文書の前に：

<style>img{display: inline; height: auto; max-width: 100%;}</style>

その結果、すべての画像はWebビューの幅に合わせて拡大縮小されます。

0
dsalaj