Beginner Tech Blog

Beginner Tech Blog Branding

viewport-fit=cover 迷走記

2025/02/08 14:15updated: 2025/02/10 17:19

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

  • viewport をmetaタグでhtmlに直書きすると、デフォルトで出力されるmetaタグとかぶって2つ出力されてしまう。自動出力が後に来るのでおそらく上書きされてコントロールできない。
  • 上記の結果、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)]" />

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