コーディングをしていて、iPhoneなどの実機でスクロールした際に画面下部にあるセーフエリアについてサイトが影響されていることはありませんか。iPhoneX以降から導入されたセーフエリアにより、スマートフォンサイトが影響されているケースが発生している場合があります。
特に画面下部にメニューを配置したデザインなどをされている場合には、iphoneのセーフエリアに影響されているかと思います。
そこで今回はiphoneのセーフエリア対策として、htmlのheadへの記述とCSSで簡単に対策できる方法をお伝えしていきます。誰でも簡単にできる対策なので、是非参考にしていただければと思います。
iphoneのセーフエリア対策手順1：headにmeta記述
iphoneのセーフエリア対策としてまずは、head内に下記を記述メタ記述をしてください。
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>このメタを記述するだけでは、まだiphoneのセーフエリア対策は完了していません。
あくまでCSSで調整するために必要な記述と考えて頂ければと思います。
iphoneのセーフエリア対策手順2：CSSで調整する
CSSによる調整は実に簡単。
セーフエリアに影響する部分に対して下記を記述してあげるだけど対応できます。
#sampleMenu{
padding-bottom: env(safe-area-inset-bottom);
}この2つの手順を適用してあげるだけで、簡単にiPhoneのセーフエリア対策をすることが可能です。
JSでいろいろと調整してセーフエリア対策をすることは大変なので、手軽に対応したい方にはおすすめしたい方法となります。
また詳しく知りたい方は下記サイトを参考にしていただければと思います。
https://webkit.org/blog/7929/designing-websites-for-iphone-x/
