PWA Safe Area が取得できない。毎回０が返ってくる。

Safe areaに関する記事自体は死ぬほどあると思いますが、ピンポイントでこの問題に触れてる記事は少なかった気がするのでメモを兼ねて。

おさらい

最近のiPhoneやAndroidでは画面下部にホームバーと呼ばれる横棒の操作領域が設けられている端末が多く、この操作領域として確保されるべきエリアをセーフエリアと呼びます。

(Google画像検索より)

Webアプリやサイト開発の際、これを考慮せずスタイルを組んでしまうとホームバーが干渉する悲しい見た目になってしまいます。

そこでCSSを使って下に一定の余白を設けるわけですが、多くのサイトでは「envでセーフエリアの余白値を取得できるよ」と言っていますが、自分の端末(iOS17, iPhone15 Pro)では0が返ってきてしまいだめでした。

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

結論

最終的に以下でうまくいきました。

1: metaタグにviewportを追加する

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

2: env・constant関数の2通りでpaddingを指定する

• TypeScript側でやる場合

const [safeArea, setSafeArea] = useState(0);
  useEffect(() => {
		// mount後でないと`getComputedStyle`がundefinedになってしまうのでuseEffect内で実行する
    setSafeArea(
      parseInt(
        getComputedStyle(document.body).getPropertyValue('padding-bottom'),
      ),
    );
  }, []);
// 中略

<div style={{ paddingBottom: safeArea }}>
  Safe Area is here.
</div>

• cssでやる場合

.pb-safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

<div className="pb-safe">
  Safe Area is here.
</div>

ここが肝で、どうもiOS11.2でconstantが廃止され、それ以降はenvを使う必要があるそうです。

ただ、自分の端末は11どころか17なので、なぜenvだけでダメだったのか謎です・・。
が、とりあえず両方指定しておけば間違いなさそうです。

以下の記事がとても詳しく、助かりました。
https://qiita.com/kanakana0330@github/items/6ae264b9da00c326ab1d