iOSでのレイアウト崩れ問題とその対処法

事象

Next.js と Tailwind CSS を使用してiOS向けのレスポンシブ対応を行っている際に、mainタグにh-screenを適用してもiOSのアドレスバーが画面下部に表示されることでレイアウトが崩れる現象が発生しました。

対処法

この問題の原因は、iOSでのビューポートの高さ (vh) が動的に変化するため、アドレスバーの表示によってビューポートの高さが変わり、それがレイアウト崩れを引き起こしていました。これを解決するためには、Tailwind CSSの設定を以下のように変更します。この設定では、標準のビューポート高さ (vh) ではなく、ダイナミックビューポート高さ (dvh) を使用しています。

tailwind.config.ts

module.exports = {
  theme: {
    extend: {
      // Solutions for Safari address bar display issues
      height: {
        screen: ["100vh", "100dvh"],
      },
      minHeight: {
        screen: ["100vh", "100dvh"],
      },
      maxHeight: {
        screen: ["100vh", "100dvh"],
      },
    },
  },
};

vh と dvh の違い

vh (Viewport Height) はビューポートの高さの100分の1を指し、画面の可視領域を基に計算されます。一方、dvh (Dynamic Viewport Height) はiOSデバイスにおける動的なビューポートの高さを指し、アドレスバーやツールバーの表示による高さの変化を考慮に入れた値です。iOSではアドレスバーの表示によってビューポートの高さが変わるため、dvh を使用することでこれらの変化に柔軟に対応できます。

参照

主にこちらの記事を参考にさせていただき、
とても助かりました！ありがとうございます！

https://zenn.dev/futa/articles/90d7410650a73e
https://zenn.dev/cti1650/articles/4d36c8a667f88a

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！
また、なにか間違ってましたらご指摘いただけますと幸いです！