ビューポートサイズリファレンス

ビューポートサイズリファレンスは、レスポンシブWebデザインで使用される 60以上の一般的なデバイスビューポートサイズを一覧表示する、包括的な ブラウザベースのツールです。スマートフォン、タブレット、ノートPC、 デスクトップ、スマートウォッチ、TVスクリーンについて、正確なCSSピクセル サイズ、デバイスピクセル比（DPR）、物理ピクセル解像度、アスペクト比を 各デバイスごとに提供します。

レスポンシブデザインでは、幅広い画面サイズでレイアウトがどのように 表示されるかを理解する必要があります。このツールは、Apple、Samsung、 Google、その他のメーカーの人気デバイスのビューポートサイズを、一つの 検索可能なリファレンスとして提供します。CSSメディアクエリの作成、 ブラウザDevToolsでのテスト、デザインシステムのブレークポイント計画 など、正確なビューポートデータがすぐに参照できることで時間を節約し、 推測を減らせます。

現在のブラウザビューポートもリアルタイムで表示されます（幅、高さ、 DPR、向き）。レスポンシブレイアウト構築時の簡単な確認に便利です。 スケーリングされた矩形を使って複数デバイスを視覚的に比較することも できます。

専用のブレークポイントセクションでは、Tailwind CSS、 Bootstrap 5、Material UIのデフォルトレスポンシブ ブレークポイントを表示します。CSS単位の変換が必要な場合は、 px-rem変換ツールもご活用ください。

各デバイスエントリは個別にコピーでき、フィルター済みテーブル全体を CSVまたはJSONでエクスポートして、テスト自動化スクリプトやドキュメント に活用できます。レスポンシブレイアウトの視覚的構築には CSSレイアウトジェネレーターが便利です。 色関連のレスポンシブ対応には カラーコンバーターをお試しください。

すべての処理はブラウザ内で完結します。サーバーへのデータ送信は 一切ありません。デバイスデータベースはページに直接バンドルされており、 オフラインでも動作し、即座に読み込まれます。

1. デバイステーブルをブラウズして特定のデバイスのビューポートサイズを確認します。カテゴリタブ（Mobile、Tablet、Laptop、Desktop、Watch、TV）でリストをフィルターできます。
2. 検索ボックスにデバイス名を入力して、特定のモデルをすばやく見つけます（例：「iPhone 15」「Galaxy S24」）。
3. 列ヘッダーをクリックしてその列でソートします。もう一度クリックするとソート順が反転します。
4. 各行のコピーボタンをクリックして、そのデバイスのビューポート情報をクリップボードにコピーします。
5. CSVまたはJSONエクスポートボタンを使って、現在フィルターされたデバイスリストをテストスクリプトやドキュメント用にダウンロードします。
6. Visual Size Comparisonセクションを開き、最大6台のデバイスを選択して、相対的なビューポートサイズをスケーリングされた矩形で確認します。
7. Popular Framework Breakpointsセクションまでスクロールして、Tailwind CSS、Bootstrap 5、Material UIのデフォルトブレークポイントを参照します。Ctrl+Shift+Cで現在のビューをCSVとしてすばやくエクスポートできます。