【iPhoneX・iPhone11】固定フッターのセーフエリア対応

みなさんこんにちは、ゆうやです！

ロックバンド RADWIMPSの3年ぶり2度目の紅白歌合戦出場が発表された今日このごろ、いかがお過ごしでしょうか。

興行収入139.8億円を記録した大ヒット映画『天気の子』の主題歌『愛にできることはまだあるかい』を紅白特別Verで披露するとのこと！大晦日がより一層楽しみになりました！

さてさて本題に入っていきましょう。

本記事では、

・iPhoneX or iPhone11で固定フッターと黒いバーが被ってしまい困っている、、、

・TwitterはiPhoneX or iPhone11の時だけ、固定フッターの下に余白が入っている、、あれどうやってやってるの？

とお悩みの方向けにその対処法を紹介します！

かくいう私も業務で同じ問題に遭遇し悩んでいた所、検索してヒットした記事に救われたので本記事が少しでもお役に立てれば幸いです。

呪文その1.viewport-fit=cover
呪文その2.safe-area-inset-bottom
参考記事
まとめ

呪文その1.viewport-fit=cover

まずはmetaタグに以下の赤いマーカーが引いてある箇所を追加します！

viewport

<meta name="viewport" content="initial-scale=1, viewport-fit=cover">

「viewport-fit」はiOS11から対応した画面の挙動をコントロールするものだそうです（詳しくは知らない）

呪文その2.safe-area-inset-bottom

次に、該当の固定フッターのcssに以下を追加します！

最近、Appleで新しく導入された「セーフエリア」という考え方があるそうで、

safe-area-inset-bottomにセーフエリアから画面最下部までの距離が入っていて、その値を取得するためにenv()という関数を用います！

css

padding-bottom: calc(env(safe-area-inset-bottom));

上記を反映してiPhoneX・iPhone11実機で見てみると、固定フッターの下余白が底上げされていることを確認できるでしょう！

+αで「もう少し位置を調整したいよ！」という方は、以下のようにpadding-topや要素のheightの指定を調整するとうまくいくはずです。

css

height: calc(〇〇px + env(safe-area-inset-bottom));
padding-top: calc(env(safe-area-inset-bottom) - 〇〇px);
padding-bottom: calc(env(safe-area-inset-bottom));

例えば、heightが45pxの固定フッター「.FixedBar」という要素に指定する場合、こんな感じになります。

css

.FixedBar{
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #ccc;
  width: 100%;
  height: calc(45px + env(safe-area-inset-bottom));
  line-height: 45px;
  padding-bottom: calc(env(safe-area-inset-bottom));
  padding-top: calc(env(safe-area-inset-bottom) - 35px);
}