テスト概要
4
テストデバイス数
5
テストページ数
20
テストケース合計
20 / 20
✓ ALL PASSED
テスト対象デバイス
| デバイス | 画面幅 | カテゴリ | 説明 |
|---|---|---|---|
| Galaxy Fold | 280px | 超小型 | 折りたたみデバイスの最小幅。レイアウト崩壊の限界テスト。 |
| Galaxy S21 | 360px | やや小型 | Androidの標準的な小型端末。多くのユーザーが利用。 |
| iPhone 14 | 390px | 標準 | iOSの標準サイズ。ベースラインとなるデバイス。 |
| iPhone 14 Pro Max | 430px | 大型 | 大画面スマートフォン。余白やレイアウトの広がりを確認。 |
ページ別スクリーンショット
レシピ一覧
レシピカード、フィルター、統計グリッドの表示確認
Galaxy Fold280px
Galaxy S21360px
iPhone 14390px
iPhone 14 Pro Max430px
レシピ追加
URL入力フォーム、追加方法選択UIの表示確認
Galaxy Fold280px
Galaxy S21360px
iPhone 14390px
iPhone 14 Pro Max430px
買い物リスト
チェックリスト、カテゴリ分けの表示確認
Galaxy Fold280px
Galaxy S21360px
iPhone 14390px
iPhone 14 Pro Max430px
チャンネル管理
チャンネルカード、追加ボタンの表示確認
Galaxy Fold280px
Galaxy S21360px
iPhone 14390px
iPhone 14 Pro Max430px
レシピ詳細
ボトムバー、セカンダリボタン、材料・手順の表示確認
Galaxy Fold280px
Galaxy S21360px
iPhone 14390px
iPhone 14 Pro Max430px
実施したレスポンシブ対応修正
| # | 対象コンポーネント | 修正内容 |
|---|---|---|
| 1 | レシピ詳細ボトムバー | min-w-0 + overflow-hidden + whitespace-nowrap, 3段階フォントサイズ (text-xs → text-sm → text-base) |
| 2 | レシピ詳細セカンダリボタン | flex-wrap, レスポンシブpadding/font |
| 3 | チャンネルページ追加ボタン | shrink-0 + whitespace-nowrap |
| 4 | ダッシュボード統計グリッド | grid-cols-3 → grid-cols-2 (小画面) |
| 5 | AdvancedFiltersドロップダウン | w-72固定 → w-[calc(100vw-2rem)] max-w-80 |
| 6 | 設定ページサインアウトボタン | shrink-0 + whitespace-nowrap, 超小画面でテキスト非表示 |
| 7 | ランディングページCTAボタン | px-8 → px-6 + whitespace-nowrap |
| 8 | ランディングページインジケーター | gap-8 → gap-4 + flex-wrap |
| 9 | 調理モードナビボタン | h-14→h-12, gap-3→gap-2, text-base→text-sm (小画面) |
| 10 | 調理モードセグメントコントロール | text-xs→text-[11px], px-3→px-2.5 (小画面) |