タイトルは次のように書き換えられました: CSS3 の 100vh 値はモバイル ブラウザでは固定されていません
<p>非常に奇妙な問題があります...遭遇するすべてのブラウザとモバイル バージョンでこの現象が発生します: </p>
<li>ページが読み込まれると、すべてのブラウザには、スクロールを開始すると上にスライドするトップ メニュー (アドレス バーの表示など) が表示されます。 </li>
<li>場合によっては、100vh がビューポートの表示部分でのみ計算されるため、ブラウザ バーが上にスライドすると、100vh が増加します (ピクセル単位)</li>
<li>寸法が変更されたため、すべてのレイアウトが再描画され、サイズが変更されます</li>
<li>ユーザー エクスペリエンスに良くありません</li>
</ul>
<p>この問題を回避するにはどうすればよいですか?ビューポートの高さについて初めて聞いたとき、私は興奮し、JavaScript を使用する代わりにビューポートの高さを使用してブロックの固定高さを設定できるのではないかと考えましたが、今では実際に JavaScript といくつかのサイズ変更イベントを使用することが唯一の方法だと考えています...< /p>
<p>ここで問題を確認できます: サンプル サイト</p>
<p>誰かがこの問題を解決するのを手伝ってくれたり、CSS ソリューションを提供してもらえますか? </p>
<p>簡単なテストコード:</p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">/* 問題がいつ発生したかを追跡できるかもしれません... */
$(関数(){
var サイズ変更 = -1;
$(ウィンドウ).resize(function(){
$('#currenth').val( $('.vhbox').eq(1).height() );
if (サイズ変更) $('#currenth').css('background:#00c');
})
.resize();
})</pre>
<pre class="ブラシ:css;ツールバー:false;">*{ マージン:0; パディング:0; }
/*
これは同じ高さのままであるはずのボックスです...
テキストが多すぎる場合は、min-height を使用して、コンテンツがビューポートの高さを超えることを許可します。
*/
.vhbox{
最小高さ:100vh;
位置:相対;
}
.vhbox .t{
表示:テーブル;
位置:相対;
幅:100%;
高さ:100vh;
}
.vhbox .c{
高さ:100%;
表示:テーブルセル;
垂直配置:中央;
テキスト整列:中央;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="vhbox" style="background-color:#c00">
<div class="t"><div class="c">
この div の高さはビューポートの 100% にする必要があり、ページをスクロールするときにこの高さを維持する必要があります。
<br>
<!-- サイズ変更イベントがトリガーされると、この入力ボックスが強調表示されます -->
<input type="text" id="currenth">
</div><
</div>
<div class="vhbox" style="background-color:#0c0">
<div class="t"><div class="c">
この div の高さはビューポートの 100% にする必要があり、ページをスクロールするときにこの高さを維持する必要があります。
</div><
