パソコンで見たら画面の高さピッタリになる100vhなのにスマホ（アンドロイド、アイフォン）で見ると下が見切れちゃう…。ものすごい困りますよね。

100vhじゃないの？高さピッタリじゃないの？なんで見切れるの、という感じ。

もう気づかれていると思いますが、スマホ（アンドロイド、アイフォン）の場合は画面下に出てきてるホームボタンみたいなやつまで含んだ高さが100vhになっちゃってるんで、こんな風に見切れてしまうんですよね。

（※アイフォンの場合はアドレスバーを100vhに含むようです）

んじゃスマホでの全画面表示はあきらめるしかないの？というとそんなことはないです。ここでは100vhがスマホ時見切れてしまう問題の解決方法を紹介しますね。

 

①アイフォンはcssで解決可能！

スマホの中でもアイフォンだけ100vhピッタリになればいい！というのであればcssでサクッと解決できちゃいます。

 

css

@supports(-webkit-touch-callout: none){
	○○{
		height: -webkit-fill-available;
	}
}

 

この方法の注意点としては、

  1. 「@supports(-webkit-touch-callout: none)」を書かないとパソコン版のクロームで見た目がおかしくなるコト
  2. 画面を縦から横、横から縦のように持ち替えたときは100vhにならないコト（最初の縦/横のサイズで固定されちゃう）
  3. アンドロイドは未対応

 

の3つ。

特にアイフォンと並んでWEBサイトを閲覧することの多いアンドロイドスマホに未対応なのはちょっとな～という方が多いと思います。

 

②100vhを自分で定義しちゃう（javascript）

二つ目が100vhの高さ、というか1vhの高さをjavascriptで自分で設定しちゃう方法。

ただ個人的にjavascriptを使うのはあんまり好きじゃないのでやってません。

 

javascript

var vh = window.innerHeight*0.01;
document.documentElement.style.setProperty( '--vh', ${vh}px);

 

javascriptのsetPropertyでcssのカスタムプロパティっちゅうものを宣言することができます。ここでは「–vh」というcssのカスタムプロパティにjavascriptで計算した1vhのサイズを格納してます。

これでjavascriptとcssの間で変数の橋渡しができるってコト！かなり便利ですよね。今回はサイズとしてpxを渡してますが、色とかも渡せちゃいます。

 

cssでの使用例

○○｛
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
}

（※2行目の「height: 100vh;」はcalcやvar未対応の古いブラウザ用の宣言です。cssは下の行ほど有効になるのでcalc、varが有効なブラウザなら2行目の100vhは上書きされて向こうになるので安心、というコト）

参考：cssのカスタムプロパティvar()の第2引数って何？

 

次はcssでの使用例もサクッと。

cssの方はvar()というのを使ってさっきjavascriptのsetPropertyで設定したカスタムプロパティ「–vh」の値を読み取っています。

んでそれを100倍してるんで、これで100vh。画面ピッタリになるでしょ！というやり方です。

うーん、スマートですねー。

ちなみに上のシンプルなjavascriptだとスマホを縦から横にしたときとかは再計算されないので、もしそこまで厳密に対応するならresizeのイベントをトリガーさせてまたvhを再計算させてあげればOKです。

（※ただresizeイベントはスマホスクロール時にも発火するのでサイト全体が重くなる可能性が。なので個人的に好きじゃないです。スマホを縦から横に持ちかえるケースはものすごい少ないと思うので、そっちに目をつぶる方が全体的な操作感アップにつながるんじゃないかな、と。）

参考：cssカスタムプロパティの便利な使い方！サクッと簡単まとめ

 

③「width:100%」を使う

はい、これです。

「100vh」じゃなくて「100%」を使っちゃう。往年の。昔ながらの。

個人的にこれが一番しっくりきます。高さ100vhでスマホ時見切れちゃうならもう100%使えばいいじゃん。という感じ。100%はアドレスバーとかホームボタンの領域とか普通にのぞいた高さになります。

つまり100%にしておけば普通に全画面にできる、見切れない、というコト。javascriptも使わなくていいし一番楽、な気がします。

 

まとめ

100vhだとスマホ表示時に見切れちゃう！全画面にならない！問題の解決方法を3つ紹介しました。

まとめると、

  1. アイフォンだけならcss「-webkit-fill-available」でOK
  2. javascriptで高さを計算してカスタムプロパティとしてcss使用
  3. 「witdh:100vh」じゃなくて昔ながらの「width:100%」を使う

 

の3つ。①はアンドロイド対応できないんで②か③。

②が一番スマートで③はシンプル。個人的にはjavascriptをできるだけ使いたくないし、resizeとかscrollとかのイベント使用はできるだけ避けたいんで③番を使うことが多いです。

参考にしてみてくださいね。それでは。