responsive-testing

レスポンシブテスト

UI を変更した後は、すべての標準ブレークポイントでアプリが正しく表示されることを確認してください。

テストするビューポート

名前	幅	Tailwind
モバイル（小）	375px	default
モバイル（大）	428px	default
タブレット	768px	md:
デスクトップ	1280px	xl:
ウルトラワイド	1536px	2xl:

ワークフロー

1. ページに移動する

browser_navigate を使用して対象の URL（通常は http://localhost:3000、または開発サーバーが実行されている URL）を開きます。

2. 各ビューポートをテストする

各ビューポートサイズで、次の手順を実行します。

1. ビューポートのパラメーターを指定して browser_navigate を使用するか、browser_snapshot でレイアウトを確認し、ビューポートのサイズを変更します
2. browser_take_screenshot でスクリーンショットを撮影します
3. browser_snapshot で aria ツリーを確認し、次の点をチェックします。
   • コンテンツがはみ出していないか、ほかの要素の背後に隠れていないか
   • ナビゲーションがハンバーガーメニューに折りたたまれるべきか
   • テキストが小さすぎて読めなくなっていないか
   • ボタンやリンクが近すぎないか（タッチターゲットの問題）
   • 不要な水平スクロールバーが表示されていないか

3. よくある表示崩れを確認する

• オーバーフロー：ビューポートより幅の広い要素によって、横スクロールが発生していないか
• レイアウトの崩れ：モバイルでは縦に並ぶべき Flex/Grid アイテムがそうなっていないか
• コンテンツの非表示：メニュー切り替えなしに、特定のサイズで要素が消えていないか
• フォントの拡大縮小：デスクトップでは読みやすいテキストが、モバイルでは小さすぎないか
• 固定位置指定：モーダル、トースト、スティッキーヘッダーが小さな画面で崩れていないか
• 画像：サイズの大きすぎる画像が縮小されているか

4. 報告する

Responsive Test Results:
  375px (mobile):  PASS — layout stacks correctly
  428px (mobile):  PASS
  768px (tablet):  WARN — nav items overlap, need hamburger menu
  1280px (desktop): PASS
  1536px (ultrawide): WARN — content not centered, stretched too wide

見つかった問題を修正し、該当するビューポートで再テストしてください。