画面解像度確認ツール
現在のブラウザ・画面の解像度やピクセル比をリアルタイム表示。
画面解像度確認の使い方
- ページを開くだけで現在のデバイスの画面情報が表示
- ブラウザを縮小・拡大するとリアルタイムに値が更新
- レスポンシブデザインのデバッグに活用
- デバイスピクセル比（Retina：2x以上）の確認にも
よくある質問
Q. 画面の幅とブラウザ幅の違いは？
A. 画面の幅：モニター全体の物理的解像度（ブラウザの外側も含む）。ブラウザ幅：実際にコンテンツが表示される領域、タスクバー・メニューバーを除いた内側。レスポンシブデザインの判定はブラウザ幅（window.innerWidth）を使用、CSS @media queryはこの値を参照します。
Q. デバイスピクセル比とは？
A. 論理ピクセル1pxあたりの物理ピクセル数。通常ディスプレイは1x（等倍）、Retina・4K高精細ディスプレイは2x・3x。1920×1080ディスプレイでピクセル比2xなら物理解像度3840×2160の高解像度相当。Webデザインでは @2x・@3x画像を準備して対応します。
Q. 主要デバイスの解像度は？
A. iPhone 15 Pro Max：430×932 (CSS)、1290×2796（物理）、3x。iPad Pro：1024×1366（CSS）、2048×2732（物理）、2x。MacBook Pro：1440×900または1680×1050（Retina）。Windows PC 1920×1080（FHD）が最も一般的、4Kディスプレイは3840×2160で2xスケーリング設定が標準です。
Q. レスポンシブデザインの breakpoint は？
A. Tailwind CSS標準：sm 640px・md 768px・lg 1024px・xl 1280px・2xl 1536px。Bootstrap 5：sm 576px・md 768px・lg 992px・xl 1200px・xxl 1400px。モバイルファースト設計では、最初は320pxスマホから考慮、徐々に幅を広げるのが王道のレスポンシブ開発手法です。
おすすめサービス
Udemy - プログラミング講座
学習Web開発・アプリ開発を学べるオンライン講座。セール時は1,200円から。
ConoHa WING - 高性能レンタルサーバー
サーバー国内最速の高性能レンタルサーバー。初期費用無料、WordPress簡単セットアップ対応。
エックスサーバー - 国内シェアNo.1
サーバー国内シェアNo.1のレンタルサーバー。高速・安定・大容量でWordPressにも最適。
※ PR・広告を含みます