web-dev-qa-db-ja.com

WebViewのサイズを変更するときにWebページをWebViewの幅に合わせる方法（リロードなし）

HTMLページとフルスクリーンAndroid webviewがあります。HTMLコンテンツはWebviewの表示領域よりも大きくなっています。Iwantto HTMLコンテンツをwebviewの幅に合わせます。

本当に重要なのはこれです。デバイスの向きが変わっても、ウェブビューはリロードされません。つまり、単にサイズが変更され、コンテンツは幅に合わせてfitになります。

もう1つは、コンテンツが縮小されているため、ユーザーは最大100％の倍率にズームインできることです。コンテンツがズームされ、向きが変わると、Iwantコンテンツが再び幅に合うようになります。

Edit 1：HTMLの先頭にあるメタタグを変更できますが、そのコンテンツはWebviewの表示領域よりも大きいままです。 Android 2.3以降。

Edit 2：レスポンシブWebデザインに関する提案をありがとう。私はそれが何であるかを知っており、私はそれを行うことができます。問題は、この場合、HTMLコンテンツの多くを変更できないことです。

TL; DR：コンテンツをリロードせずに、より大きなHTMLコンテンツを常にWebViewのサイズ変更に合わせてAndroid Webviewの幅に合わせる方法。 HTMLの多くはありません。）

androidwebviewresizeorientation
17
Hoang Huynh

次の設定を行います

    webview.getSettings().setUseWideViewPort(true);
    webview.getSettings().setLoadWithOverviewMode(true);
16
Sush

これは回答のように聞こえるかもしれませんが、サイトの他の部分をどのように構築しているかに依存すると思います。レスポンシブサイトで作業するときは常に、次を使用します。

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

これは2つのことを行います：_width=device-width_はデバイスの幅を見つけ、そのサイズに一致するスタイルをCSSから送信します（メディアクエリを使用して、CSSで特定のサイズのスタイルを設定できます）。 _Initial-scale=1_は、ロード時にサイトを100％で表示しますが、ユーザーにズームインのオプションを提供します。

サイトが特定の幅向けに開発されている場合は、次を使用してみてください。

<meta name = "viewport" content = "width = 980 (or whatever the width you're designing for)">

これにより、デバイスの幅に合わせてサイトが縮小されます。ここでは特別なことは何もありません。ユーザーは基本的にミニデスクトップサイトのみが表示されます。

これを読むことをお勧めします Webdesign Tuts + の記事。例を使用して、ビューポートメタタグについて詳しく説明します。

4
Meg

Webviewで何も変更する必要はありません。必要なのはResponsive Html Pageだけです。デザイナーの場合、それはurの問題を解決するか、UIタグでur Questionの一部を投稿できます。

Responsive htmlページを構築するには、次のURLにアクセスしてください： [〜＃〜] here [〜＃〜]

結果：レスポンシブhtmlページの作成中にwebviewでテストする必要があります。Android自体のデフォルトブラウザは、ur htmlページがレスポンシブかどうかを反映します。Androidデバイスのデフォルトブラウザで動作しますAndroidのどのWebビューでも動作します。

テスト：あなたはレスポンシブHTMLページをテストできます [〜＃〜] here [〜＃〜]

2
KOTIOS

レスポンシブWebデザインのヒントを次に示します。幅の代わりに位置を使用します。

例えば：

html

<div id="somediv">I'm just a div, just a regular div.</div>

css

#somediv {
left: 0; /*numeric value in pixels you would like this div to be from the left */
right: 0; /*same as above, except on the right */
height: 50px;
width: auto;
}

上記のdivは、画面の幅に基づいて自動的にサイズ変更されます。

0
r3wt

HTMLとCSSのソースを確認する必要があります。 ％サイズのみを使用する必要があり、固定幅のpxサイズを使用しないでください。その後、ユーザーはブラウザのサイズを変更でき、動的にサイズが変更されます。このため％幅も使用しています。また、CTRL-MouseWheel（ズーム）を使用すると、動的にサイズ変更されます。

0
Chloe