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

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

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

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


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

本記事では、

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

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

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

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

呪文その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);
}

参考記事

参考 iPhone X で固定フッターやボトムメニューが被る時の対処法 Bambi's BLOG @ hatena 参考 Designing Websites for iPhone XWebKit

まとめ

いかがでしたでしょうか。

iPhoneX・iPhone11の実機が手元にないと気づきようもない問題でしたね笑

新しい機種が出る度に対応していかなければならないのは少々手間ですが、その度に新しい知識を得られるのは快感ですね!

後日セーフエリアについてもう少し詳しく書き足していこうかなと思います。

最後までご高覧いただきありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です