これで解決！height: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック
Post on:2020年9月11日
sponsors
iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。
CSSのみのテクニックで、JavaScriptは必要ありません。
height: 100vh;だけでなく、min-heightやmax-heightでも機能します。
PostCSS 100vh Fix
PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。
高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通りに高さいっぱいには表示されません。
|
1 2 3 4 |
body { /* iOSでは下部に隠れてしまうため、高さいっぱいに表示されません */ min-height: 100vh; } |
iOSでも高さいっぱいに表示するには、下記のようにします。
|
1 2 3 4 5 6 7 8 9 |
body { min-height: 100vh; /* mobile viewport bug fix */ min-height: -webkit-fill-available; } html { height: -webkit-fill-available; } |
これはChrome、iOS/iPad/macOSのSafariで機能します。-webkit-fill-availableはChromeで問題が発生する場合があるので、適用されないようにします。
ChromeがFirefoxの実装に一致するように動作しているため、このコードはhtml要素を含むようにアップデートされました。
左: アドレスバーを非表示、右: 表示
height: 100vh;だけでなく、min-heightやmax-heightでも機能します。
vhのサポートブラウザは、下記の通りです。
参考
iOSの100vhの挙動については、下記をご覧ください。
注意点
ピュアCSSのソリューションは制限されます。
多くの場合、postcss-viewport-height-correctionのようなJavaScriptベースのハックを使用する必要があります。
height: 90vh;やheight: calc(100vh - 60px);のような高さいっぱいでない場合は機能しません。
また、Android版Chromeのバグはサポートしていません。
左: アドレスバーを非表示、右: 表示
使い方
Step 1
プロジェクトにPostCSSの設定が存在するかどうかを確認します。ルートにあるpostcss.config.js、package.jsonにあるpostcssセクション、またはバンドルの設定にあるpostcssなど。
PostCSSを使用しない場合は、公式ドキュメントに従って追加し、設定でこのプラグインを設定します。
Step 2
当プラグインをプラグインリストに追加します。
|
1 2 3 4 5 6 |
module.exports = { plugins: [ + require('postcss-100vh-fix'), require('autoprefixer') ] } |
Step 3
あとはCSSで、height: 100vh;やmin-height: 100vh;を使用するだけです。
sponsors
