☰

CSS3 100vh はモバイルブラウザでは一定ではありません 質問する

tag-icon • tag-icon html css viewport-units
CSS3 100vh はモバイルブラウザでは一定ではありません 質問する

非常に奇妙な問題が発生しています...すべてのブラウザとモバイル バージョンでこの動作が発生しました:

  • すべてのブラウザには、ページを読み込むときにトップ メニュー (たとえば、アドレス バーを表示) が表示され、ページのスクロールを開始すると上にスライドします。
  • 100vh はビューポートの表示部分のみで計算されることもあるため、ブラウザバーが上にスライドすると 100vh が増加します (ピクセル単位)
  • 寸法が変更されたため、すべてのレイアウトを再描画して再調整します
  • ユーザーエクスペリエンスに悪影響を与える

この問題を回避するにはどうすればよいでしょうか。viewport-height について初めて聞いたときは興奮し、JavaScript を使用する代わりに固定高さのブロックに使用できると思いましたが、今ではそれを実現する唯一の方法は、実際にはサイズ変更イベントを含む JavaScript であると考えています...

問題は次の場所で確認できます:サンプルサイト

どなたか CSS ソリューションを手伝っていただいたり、提案していただいたりできますか?

簡単なテストコード:

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})
*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

ベストアンサー1

残念ながらこれは意図的です…

これはよく知られている問題です (少なくとも Safari モバイルでは)。これは他の問題を防ぐための意図的なものです。Benjamin Poulain が Webkit のバグに返信しました:

これは完全に意図的なものです。この効果を実現するには、かなりの労力が必要でした。:)

基本的な問題は、スクロールすると表示領域が動的に変化するという点です。それに応じて CSS ビューポートの高さを更新する場合、スクロール中にレイアウトを更新する必要があります。これは見た目が悪いだけでなく、ほとんどのページで 60 FPS でこれを行うのは事実上不可能です (60 FPS は iOS のベースライン フレームレートです)。

「見た目がひどい」という部分を見せるのは難しいですが、スクロールするとコンテンツが移動し、画面に表示するものが絶えず変化していくことを想像してみてください。

高さを動的に更新することは機能していなかったため、iOS でビューポート単位をドロップする、iOS 8 以前のようにドキュメント サイズに合わせる、小さいビュー サイズを使用する、大きいビュー サイズを使用するなど、いくつかの選択肢がありました。

私たちが持っていたデータから、より大きなビュー サイズを使用するのが最善の妥協策であることがわかりました。ビューポート ユニットを使用しているほとんどの Web サイトは、ほとんどの場合、見栄えが良好でした。

Nicolas Hoizey 氏はこのことについてかなり研究しました。https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

修正予定なし

現時点では、モバイル デバイスでビューポートの高さを使用しないこと以外にできることはあまりありません。Chrome も 2016 年に次のように変更されました。

おすすめ記事