LoginSignup
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-09-20

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

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

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

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

いきなりgithub

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1