スマホ向けのアプリケーション フルスクリーンを作る時の問題のお話です。
iPhone Safari height:100vh が正常動作しない問題があります。
height: 100vh とは
- 「vh」は「viewport height」の略で、viewport の高さ（ブラウザの高さ）に対する割合を指定することが可能です
- viewport のサイズのため、下部にアドレスバーやナビゲーションが表示された場合は、100vh はそれに応じて小さくなリます。
height: 100% との違い
- height: 100% は親要素に対する割合です。100 vh は親要素関係なく viewport の高さを設定することができます。
iPhone Safari で起きている問題
- 100vh はアドレスバーなどを覗く画面のサイズを返すはずなのですが、この値が正しくないケースがあります。そのため、アドレスバーの考慮が入ってないサイズになったりしてしまいます。
- Safari だけの問題かと思ったら、Android Chrome でも発生を確認しました。
対応策
- viewport-units-buggyfill を適用する。
発生すると言われる Mobile Safari on iOS and IE9+ に対して修正コードを当ててくれます。
導入
npm i viewport-units-buggyfill -d
使い方
実行場所はどこでも良いです。
import viewportUnit from 'viewport-units-buggyfill';
// 対象端末に絞って対応するならこちら
viewportUnitsBuggyfill.init();
// 全ての端末を対象とする場合はこちら。Android Chrome でも現象を確認できたので force がおすすめです。
viewportUnitsBuggyfill.init({force: true});
webpack, es6 を使わない環境であればこちら。
<script src="viewport-units-buggyfill.js"></script>
<script>window.viewportUnitsBuggyfill.init();</script>
iframe の フルスクリーンなども問題なく実現できました。