IPhoneXでのヘッダ・フッタ追従挙動をテストしてみた


IPhoneX Safariのoffsetどうなってんだろか

sticky header って結構やるじゃないですか、いわゆる追従ヘッダー。
最近だとcssでposition: sticky;にすれば勝手に上下に余白取ってくれるから楽になりましたね。

最近出てきたスマホってフル液晶(っていうのかな?フルディスプレイ?)で
表示領域とイベント領域がちがってフロントエンドは検証大変です。

とりあえずiphoneXだとbottomの位置どうなってんねんとおもって検証してみました。

いきなりgithub

githubにまるっとアップしてあるので
iosSimulatorある方はcloneして見たほうが早いです。

document.bodyのgetBoundingClientRect()を表示してます。

詳しい検証をしたらtipsをアップデートします