3

Web サイトの body 要素のサイズを利用可能な画面のサイズに設定する方法を見つけようとしています。デスクトップ ブラウザーでは簡単ですwidth=height=100%が、モバイル デバイスではそれほど単純ではありません。

多くのデバイスは、最適な読みやすい縮尺でページを表示しようとするいくつかの初期ズーム設定にデフォルト設定されています。<head>Android の場合、次の-tagを使用してこれをオフにできます。

<meta name="viewport" content="width=device-width, height=device-height, target-densitydpi=high-dpi, initial-scale=1.0>

これで、ボディの幅の設定が期待どおりに機能するようになりました (Android の場合)。高さはまったく別の問題です。ブラウザは、アドレス バーの現在の位置に基づいて 100% の意味を設定するからです。そのため、ページが最初に表示されるよりも長く、スクロールされてアドレス バーが画面外に出た場合、高さを 100% に設定すると望ましい効果が得られます。しかし、ユーザーがページを下に移動してアドレス バーを表示するとすぐに、高さが更新され、逆方向にスクロールできなくなります。

したがって、モバイル デバイスの場合、ボディの高さを正しく設定する唯一の方法は、100% ではなくピクセル サイズに設定することです。しかし、利用可能なさまざまなサイズの尺度 (screen.height、window.outerheight など) に関するこの記事を読むと、デバイス間で動作させることに身震いがします。

したがって、私の質問：

モバイル デバイスで body 要素のサイズを設定するための信頼できるベスト プラクティスの方法はありますか? 追加のクレジット: ユーザーがページをズームインできる (ズームアウトできない) ように、これを行うことはできますか?

JavaScript か CSS、またはその両方を使用するソリューションは、私には完全に受け入れられますが、少なくともデスクトップ (IE6+、Opera、Chrome、Firefox、Safari) とモバイル デバイス (電話、タブレット) で、できるだけ多くのデバイスで動作するはずです。 、Android、iOS、Windows Mobile)。

4

1 に答える 1

4

これでどこに向かっているのか完全にはわかりませんが、これらの提案のいずれかが役立つかどうかを確認してください.

メタタグについては、試してください 

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

target-densitydpi=high-dpi が必要かどうかはわかりません。必要に応じて簡単に交換できます。

CSS の場合 

 html,
 body {
    height: 100%;
  }

アドレスバーを非表示にするために、以前にこのコードを使用して良い結果が得られたか、使用していない別のコードを使用しました

幸運を！

于 2013-04-14T12:20:28.047 に答える