html - Mobile-Chrome の Web ページの下部にある不思議な空白

Question

ここSOで多くの「ページの下部にある不思議な空白」の問題を見て、viewportタグを何度も試しましたが、何が間違っているのかまだわかりません!

問題のページ: http://www.seniorchoicesunl.com/error_documents/error401.php

Chrome Dev Tools からのモバイルでの表示は次のとおりです。

私が間違っていることについてのアイデアはありますか?

編集：

ANY を設定するのinitial-scaleは悪いニュースです。文字が小さすぎる！見てみましょう：

デスクトップとタブレットをそのまま維持しながら、望ましいモバイルの外観は次のとおりです。

PS この問題を修正すると、他の Web ページで発生している他の関連する問題が相互に修正される可能性があります。

Answer 1

何が起きてる：

• を設定width=device-widthすると、ページのレイアウト サイズがデバイスの画面幅と等しくなります。つまり、要素を 100% にすると、画面と同じ幅になります。
• Chrome は、幅と画面の縦横比を使用してレイアウトの高さを推測します。つまり、高さ=幅/アスペクト比
• sub_container_div 要素は、実際にはページのレイアウト幅よりもはるかに広くなります。Nexus 6 の場合、デバイスの幅は 412px で、sub_container_div の幅は 594px です。
• コンテンツはデバイスの幅よりも広いため、Chrome はズームアウトを許可し、最小ズーム レベルでページを読み込みますが、これはレイアウトの幅/高さを変更しないため、高さ 100% はdevice-width/aspect ratioピクセルのみを埋め、ズームアウトされたものは埋めません。ビューポート。

これを修正する正しい方法は、すべてのコンテンツがレイアウト サイズに収まるようにすることです。あなたの場合、sub_container_div がレイアウト サイズよりも広い理由は、パディング/マージンによって親の外側に拡張されるためです。box-sizing: border-box解決策は、sub_container_div 要素とダイアログ要素、および sub_container_divに追加するwidth: 100%ことです。そうすれば、Chrome はズームアウトできず、レイアウト ボックスの外側を見ることができません (HTML 仕様言語では、最初の包含ブロックです)。