suganumaスマートにiPhoneXの対応のためのpaddingを設定するiPhoneXには、画面上部にセンサーや前面カメラが仕込まれているディスプレイの切り欠きがあります。safariではviewportを下記のように指定することで、横持ちした際にこの切り欠きの周りまでレンダリング領域とすることができます。content="viewport-fit=cover">この指定をすると、ディスプレイ全体に背景色等を引き伸ばせるため、より一体感のあるデザインにすることができるのですが、切り欠き部分がコンテンツと重なってしまうことが起こり得るため、CSS定数を使ってpadding等を余分に持たせてあげることで、これを回避してあげる必要があります。関数ですが、他のブラウザでは一切実装されていない機能になります。そのため、既にpaddingが設定されている要素にcalc等を使って切り欠き分をプラスしてあげる方法だと、構文解釈ができずにpaddingが未設定とされてしまいます。いえわざわざiPhoneXのために新しい要素で囲ってあげるのもバカらしい...。そんなときは下記の様に同じセレクタ内でpaddingを複数記述するとスマートに解決することができます。使っている行は解釈されないので1行目のみ適用されます。要は記述順が重要で、ベンダープレフィックスのような用法で使ってあげればよいのです。