読み込み中...
読み込み中...
ビューポート・解像度・ブレークポイントをリアルタイム表示。
画面サイズ確認ツールは、ブラウザのビューポートサイズ、スクリーン解像度、デバイスピクセル比等をリアルタイムで表示するツールです。Tailwind CSSのブレークポイント（sm/md/lg/xl/2xl）も判定表示。ウィンドウをリサイズすると値が即座に更新されるので、レスポンシブデザインの確認に便利です。
Web開発では、デバイスごとの画面サイズに応じたレイアウト調整が不可欠です。このツールでは、CSSメディアクエリの判定基準となるビューポート幅を正確に確認でき、カラーコード変換やグラデーション作成と合わせてフロントエンド開発をサポートします。
| プレフィックス | 最小幅 | 対象デバイス | CSSメディアクエリ |
|---|---|---|---|
| （デフォルト） | 0px | モバイル | — |
| sm: | 640px | 大型スマホ | @media (min-width: 640px) |
| md: | 768px | タブレット | @media (min-width: 768px) |
| lg: | 1024px | ノートPC | @media (min-width: 1024px) |
| xl: | 1280px | デスクトップ | @media (min-width: 1280px) |
| 2xl: | 1536px | 大型モニター | @media (min-width: 1536px) |
レスポンシブデザインのブレークポイント検証。CSSメディアクエリの動作確認に最適。
デバイスピクセル比やタッチ対応状況を確認。Retina判定にも。
デザインカンプの対象画面サイズと実際のビューポートを照合。
ビューポートはブラウザの表示領域、スクリーンはディスプレイ全体の解像度です。
CSSピクセルと物理ピクセルの比率。Retinaディスプレイでは2x、4Kでは1.5x〜2xが一般的。
レスポンシブデザインでレイアウトが切り替わる画面幅の境界値。Tailwind CSSの標準値で判定。
はい、ブラウザウィンドウのリサイズに連動して即座に更新されます。
レスポンシブ対応確認、デバイス情報把握、CSSブレークポイント検証などWeb開発全般に。
スマホのブラウザで本ページを開くとビューポートサイズが表示されます。例えばiPhone 15は390×844、Pixel 8は412×915が一般的です。