タイトルは次のように書き換えられました: CSS3 の 100vh 値はモバイル ブラウザでは固定されていません
P粉682987577
2023-08-21 16:49:22
<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><
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></pre>
<p><br /></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS で
100vhの代わりにmin-height: -webkit-fill-available;を使用してみてください。これでうまくいくはずです残念ながら、これは意図的なものです...
これはよく知られている問題 (少なくとも Safari モバイルでは) であり、他の問題を防ぐために意図的に行われています。 Benjamin Poulain が Webkit のバグに対応しました :
Nicolas Hoizey はこれについてかなりの研究を行っています: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of- -document-in-some-mobile-browsers.html
修正の予定はありません
現時点では、モバイル デバイスでビューポートの高さを使用しないようにする以外にできることはあまりありません。 Chrome も 2016 年に変更を加えました: