iPhoneXが発売されしばらくたち、iOS11のリリースやバグで世間は賑わっているようです。 iPhoneXで新しく導入されたSafe Areaにコンテンツがどのように表示されるのか、ざっと検証してみました。 今回検証したポイント * 固定フッター(スマホサイトでよく見られるページ下部にメニューなどがfixedで固定されているデザイン)がどのような見え方になるのか * iOS11.1とiOS11.2の記述方法の違い 関連ワード Safe Area, viewport, css, constant(), env() 検証に利用した基本コード・修正前(一部を抜粋) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i