Safe Area

#Table of Contents

• Detail
• Example
• Mixins
• Sources

#Detail

iPhone X 以降のセーフエリアを簡単に設定するための Mixin。Padding で使用しています。

#Example

safe-area-padding($way) の $way にセーフエリアを付与したい方向 top right bottom left のいずれかを入れます。サイトの viewport 設定に viewport-fit=cover が追加されている必要があります。

// iPhone X 以降で上下のセーフエリアを追加する
.wrapper {
  @include safe-area-padding(top);
  @include safe-area-padding(bottom);
}

#Mixins

#Sources