色々環境にもよりそうなんだけど、Next.js v15 app router での実装結果。

• viewport をmetaタグでhtmlに直書きすると、デフォルトで出力されるmetaタグとかぶって２つ出力されてしまう。自動出力が後に来るのでおそらく上書きされてコントロールできない。
• 上記の結果、viewport API を利用するのが良い模様。metadata API を使っているのが原因かもだけど調べる余力はなかった

その上で、スタイリングはどうするかというと...

style={{ 
        paddingBottom: 'env(safe-area-inset-bottom), constant(safe-area-inset-bottom)',
      }}

こういうのは効かず、

以下のようになった。

<div className="**** ***** ****** pb-[env(safe-area-inset-bottom)]" />
<div className="**** ***** ****** mb-[env(safe-area-inset-bottom)]" />

ケースにあわせて、パディングやマージンにセーフエリア分の高さを入れる感じ。