vhなど)は、特にスマホの各ブラウザにおいて複雑です。それらは計算に含まれますか?スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。mobile下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。高さいっぱいの要素を表示する方法ビューポートのリサイズにも対応するビューポートの高さ(vh)の仕様W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポートの高さ(vh)を見てみましょう。block.初期包含ブロックの高さの1%に等しい。デバイスやブラウザ固有の仕様を扱う際の明確な説明はありません。ビューポートの高さ(vh)は、ブラウザの現在のビューポートを元に計算されます。ブラウザを開いてWebページをロードし始めた場合、1vhはスクリーンの高さ(ブラウザのUIを差し引いた値)の1%になります。!これはスクロールをすると、話は異なります。コンテンツがアドレスバーのようなブラウザのUIを通り過ぎた途端、vhの値が更新されます。その結果、レイアウトが期待通りにならないことがあります。iOSは、スクリーンの最大の高さを元にvhの固定値を定義されるよう実装された最初のスマホ用ブラウザです。これにより、アドレスバーが表示されなくなっても、問題はありません。Chromeのスマホ用ブラウザでは1年ほど前にこれが実装されました。Androidでこれを解決するチケットがあります。Bugzilla高さいっぱいの要素を表示する方法この問題は、CSSの変数とJavaScript数行で解決します。JavaScriptでは、グローバル変数window.innerHeightを使用して、常に現在のビューポートの値を取得できます。この値はブラウザのUIが考慮されており、可視性が変わると更新されます。それを利用して、ビューポート値をCSSの変数に格納し、vhユニットの代わりに要素に適用させます。下記のコードではCSSの変数を--vhとし、高さを指定します。100);}JavaScriptで、ビューポートの内側の高さを取得します。`${vh}px`);JavaScriptでビューポートの高さを取得し、vhに使用できる値を得ることができました。変数--vhの値はドキュメントのルートに設定しておくとよいでしょう。その結果、他のvhユニットと同じように--vhを高さの値として使用し、100を掛けて、私たちが望む完全な高さにすることができます。CodePen.ビューポートのリサイズにも対応する上記で完了したように見えるかもしれませんが、これだけではビューポートの高さが変化した時に要素のサイズは更新されません。上記のデモでサイズを変えてみてください。リサイズに対応するには、windowのresizeイベントを取得することで、--vhの値を更新できます。ユーザーがデバイスを縦向きから横向きに回転させた場合やナビゲーションがスクロールのビューから移動する場合に便利です。`${vh}px`);});--vhの値を更新すると、ページが再描画され、その結果として要素が隠れてしまうかもしれません。そのため、ビューポート単位の正確な値が必要な場合にのみ使用してください。ユーザーがブラウザのサイズを変更している間に多くのイベントが発生するのを避けるために、resizeイベントのデバウンスメソッドを実装することもできます。CodePen.上記のデモでは、ビューポートの高さを変化させた時に、それに応じてCSSの変数が更新されて要素のサイズも変化します。私は最近、このテクニックをプロジェクトで使用し、本当に助かりました。ブラウザのデフォルトの動作を扱う時は、常に2回考えるすべきです(::focusは特に注意が必要です。同様に、ブラウザは最近高い頻度でアップデートされる傾向なので、今日のソリューションは明日は機能しない可能性があることにも注意してください。この記事があなたに役立つことを願います。