iPhone X 対応のWebデザイン

先日iPhoneXの後継機が発売されましたね。 iPhoneXの特徴として画面にノッチ（切り欠き）がありますけど、Web開発に関わる者としては、新型iPhoneが出る度にビクビクします。画面の仕様が変わるとデザインに影響がありますからね。 そこで「そういえば、ウチのテンプレートのiPhoneX対応ってどうなってるんだっけ」と確認すると、未対応でした。 まだシェアは低いのですが、対応せざるを得ません。ひとまず弊社のテンプレートをiPhoneXに対応させるため調べ始めると、開発環境でiPhoneXのノッチを再現できるツールが無い状態でした。

ChromeのデベロッパーツールはiPhone8までしか対応デバイスが無い。

BLISKも対応はiPhone8まで。

これは、Macを使えということですね？（笑）

シミュレートできないとは言え、ひとまずテンプレートのノッチ対応として、metaタグに「viewport-fit=cover」を追加して、bodyタグに「viewport-fit=cover」用のコード、 「padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);」 を追加しておきました。 これで、ノッチとアイコン等のオブジェクトが被らないデザインに自動調整されるはずです。

【追記】

上記の対応はiOS11.1までで、11.2では下記のコードへの変更が必要なようです。

padding: env(safe-area-inset-bottom) padding-right: env(safe-area-inset-left) padding-left: env(safe-area-inset-left);

・・・と書いていたら、iOS12がリリースされました（笑）ノッチ対応がイタチゴッコにならないことを祈ります。