青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

ページ下部にトップに戻るボタンとか設置する時に気をつけるべきこと。iOSでセーフエリア、Safariで下部のステータスバー

iOSのSafariはブラウザ開いた際に出るステータスバー分、タップできないエリアが存在する。ここの領域はステータスバーが出ていないときはタップが無効になる。

また、iPhoneX以降はセーフエリアというのが存在する。周囲のノッチの周囲あたりがセーフエリアであり、ここもタップできない。

webkit.org

blog.umeru.ma

developer.mozilla.org

タップできない領域は、iPhone7,8あたりはセーフエリア無しで44pxだが、iPhoneX以降は形状が違いセーフエリアがあるため更に広い。

ので、画面したから20pxとかにページ上部に戻るボタンとか置くと、最初のタップでステータスバーが出てしまう。

なので、viewportにviewport-fit=coverを指定し、

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

env(safe-area-inset-bottom)でセーフエリアを計算、画面が矩形のiPhone(iPhone8など)だとこの値は0。iPhoneX以降だと値が計算されて入る。

更にSafariでタップできない領域はは44pxなので、iOSのSafariならば

margin-bottom: calc(env(safe-area-inset-bottom) + 44px);

でトップに戻るボタンはどこにもかぶらずタップできる領域に置ける。

iOSのChromeならばステータスバー分はいらないが、セーフエリアはそのまま存在する。

margin-bottom: calc(env(safe-area-inset-bottom));

でタップできる領域に置けるとは言えるが、iPhone8などセーフエリアが0のデバイスだと一番下にくっついてしまうので、

margin-bottom: calc(env(safe-area-inset-bottom) + 20px);

のようによしなな位置においておく必要がある。