【iPhoneX対応】webサイトのSafe Area対応（iOS11.1とiOS11.2） - QiitaiPhoneXが発売されしばらくたち、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
