WebView でページ全体を表示する

WebView は便利なのだけど、制御が難しい。ページをロードした直後、全体を表示するようにしたかったのだけど、どうしてもズームした状態で表示されてしまう。assets 内の HTML を読み込ませて、タグで viewport を指定しても思ったように動かなかった。いろいろと調べてみると、WebSettingsのsetUseWideViewPort()とsetLoadWithOverviewMode()を呼び出せばよいとのこと。それだけだと、右端に10pxぐらいの余白ができてしまうのでsetVerticalScrollbarOverlay()を呼び出す。
早速やってみると、思った通りに表示された。

    public HogeWebView(Context context) {
        super(context);

        setVerticalScrollbarOverlay(true); // 右端の余白を削除
        WebSettings settings = getSettings();
        settings.setUseWideViewPort(true); // ワイドビューポート
        settings.setLoadWithOverviewMode(true); // ズームアウト
    }

オーバービューモードは、ページをズームアウトした状態で表示することを意味しているようだ。ただ、WebView でレンダリングする場合は、オーバービューモードではなく最大のズームでロードされるらしい。Targeting Screens from Web Appsに以下の記述があった。

However, when your page is rendered in a WebView, the page loads at full zoom (not in “overview mode”). That is, it appears at the default size for the page, instead of zoomed out. (This is also how the page appears if the user disables overview mode.)

ワイドビューポートは、なかなか情報が出てこない。「”wide viewport” site:android.com」で検索すると、1件という寂しさ。おそらく、Android の標準のブラウザーの「ページの自動調整」のような項目と同じことではないかと。stackoverflow にWhat do setUseWideViewPort() and setLoadWithOverviewMode() precisely do?という同じような質問をしている人がいた。それによると・・・

setUseWideViewPort(true) makes the Webview have a normal viewport (such as a normal desktop browser), while when false the webview will have a viewport constrained to it’s own dimensions (so if the webview is 50px*50px the viewport will be the same size)

ということのようです。

WebView でページ全体を表示するには、setUseWideViewPort()とsetLoadWithOverviewMode()の両方を呼び出す必要がある。実は、ズームもさせたくなかったのだが、この方法だとズーム機能が有効になる。次回は、ズームできない状態で、デバイスのサイズに合わせて表示するようにする予定だ。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.