Reactでレスポンシブデザインにならないときに確認したいこと

React + Tailwind CSSを利用して困ったときの備忘です。

結論から

Public/index.htmlにメタタグを設定していない。

<meta name="viewport" content="width=device-width, initial-scale=1">

HTMLに上記が含まれておらず、スマホとPC用のレイアウトの設定をしても反映されませんでした。

npx create-react-app . で出力したものには基本含まれていると思うのでは、不意に削除してしまったようです。

上記タグに関する説明

<meta name="viewport">

このメタタグは、ブラウザに対してページのビューポート（ユーザーがウェブページを見ることができる領域）の管理方法を指示します。モバイルデバイスでは、このタグがないと、ウェブサイトはデスクトップブラウザ用にデザインされたかのように表示され、ユーザーはページをズームアウトして全体を見る必要があります。これは非常に使いにくい体験をもたらします。

width=device-width

これはビューポートの幅をデバイスの画面幅に合わせるようにブラウザに指示します。これにより、ページのコンテンツはデバイスの幅に応じて適切にスケールされます。

initial-scale=1

この設定は、ページが初めて読み込まれたときのズームレベルを定義します。`1`はページが100%のズームレベルで表示されることを意味し、これによりユーザーはページを追加でズームインまたはズームアウトせずにコンテンツを見ることができます。

このタグの主な目的は、モバイルデバイス上での閲覧体験を向上させることです。

ユーザーが追加の操作なしに、ウェブページのコンテンツを容易に読めるようにし、画面の幅に応じてコンテンツが自動的に調整されるようにするために必要です。特にレスポンシブデザインを実装する際には、このメタタグは不可欠です。

レスポンシブデザインでは、さまざまなデバイスの画面サイズに応じてページのレイアウトが動的に変化しますが、`<meta name="viewport">`タグがないと、この振る舞いが期待通りに機能しない可能性があります。
ChatGPT4

上述の通り、タグが存在しなかったため、いくらブレイクポイント(md,lg等)を指定してもそれが反映されませんでした。

おまけ：生成当初のindex.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>