スマホの高さに合わせて100%で表示するsvh【STUDIO】

ファーストビューを画面いっぱいに表示する時は「100vh」が便利ですが、スマートフォンだと100vhでは上手く表示されませんよね。

スマートフォンは、サイトを表示した時にアドレスバーが大きく表示されるので、その高さ分ほどズレてしまいます。

ファーストビューがスマホの画面（表示領域）からはみ出さないようにするためには、vh以外の指定が必要です。

STUDIOで制作する場合は、「カスタムコード」を使えばきちんと高さ100%で表示できるので、その方法をご紹介します。

スマホの高さ100%で表示する方法

スマホできちんと高さ100%でファーストビューを表示する場合、「svh」がオススメです。

STUDIOの場合は「カスタムコード」に以下の記述を追加すればOKです。
※カスタムコードは有料プランの契約が必要です。
※「#main-visual」の部分は、実際のidに変更してください。

<style>
  #main-visual {
    height: 100svh;
  }
</style>

これでファーストビューがきちんと100%で表示されるようになったと思います。

ただし、メインビジュアル部分のブロックに「margin-top（上側のマージン）」を指定していると、その高さ分ほどはみ出てしまいます。
その場合はマージンではなくパディングを使用すれば回避できます。

スマホのみで100svhを指定したい場合

もしスマホの場合のみ100svhを効かせたい場合は、以下のようにメディアクエリを使用すればOKです。

<style>
  @media screen and (max-width: 540px) {
    #main-visual {
      height: 100svh;
    }
  }
</style>

デザインエディタ側の設定

「svh」は主要なブラウザでサポートされていますが、念のためデザインエディタ側では「100vh」を指定しておきましょう。

「カスタムコード」に記述した内容はSTUDIOのライブプレビューには反映されないので、100svhに似たふるまいをする100vhを指定しておけば、ライブプレビューでもある程度のデザインチェックが可能になります。

ちなみに

ファーストビューを高さ100%で表示するなら「100dvh」でいいんじゃないかと感じる方もいらっしゃるかもしれません。

確かに、「dvh」は画面の高さに応じて動的（自動的）に設定してくれるので便利ではありますが、ファーストビューには向きません。

ファーストビューに100dvhを指定した場合、確かにきちんと100%で表示してくれますが、スワイプ（下に）するとファーストビューがフワーッと拡大表示されてしまい、少し変わった動き方になってしまいます。

原因は、スマホをスワイプするとアドレスバーが小さくなり、表示領域の高さが変化してしまうからです。
その高さの変化に合わせて「dvh」が動的に100%になろうとして動いてしまいます。

なので、スマートに100%表示をするなら「svh」がオススメです。

まとめ

スマホのファーストビューの高さ問題はずっと以前からありましたが、いまは「svh」で解決できるので便利です。
制作の際の参考になれば幸いです。