自分の画面解像度を確認する
画面解像度の確認ツール
画面解像度の確認：ビューポート、DPR、ブレークポイント | We.Inc
画面解像度、ブラウザーのビューポートサイズ、デバイスピクセル比をリアルタイムで確認できます。いまのウィンドウがTailwindとBootstrapのどのブレークポイントに当たるかと、主要な端末の画面サイズの一覧表もあわせて表示します。
あなたの画面解像度は、このページの最初のボックスに表示されています。これは、ページを読み込んだときにブラウザーが測定した値です。値はCSSピクセル単位で表示されるため、物理的なピクセル数を知りたい場合はデバイスピクセル比を掛けてください。このページにはブラウザーのビューポート、つまりWebサイトが実際に使える領域の大きさも表示され、ウィンドウのサイズを変えるとリアルタイムで更新されます。
それぞれの数値の意味
- 画面
- ディスプレイ全体の大きさ（CSSピクセル単位）
- ビューポート
- ブラウザーのウィンドウ内で実際にページが見えている領域
- デバイスピクセル比
- 1 CSSピクセルあたりの物理ピクセル数（ほとんどのスマートフォンでは2または3）
画面サイズ、ビューポートサイズ、デバイスピクセル比、画面の向き、色深度を、お使いのブラウザーからリアルタイムで読み取って表示します。さらに、いまのウィンドウがTailwindとBootstrapのどのブレークポイントに当たるかを示し、コピーして使えるメディアクエリと、主要な端末の画面サイズをまとめた表も用意しています。
- このページを開くだけです。数値はブラウザーが持つ画面とウィンドウの情報から読み取っているため、何もインストールする必要はなく、どこかへ送信されることもありません。
- ウィンドウのサイズを変えたり、スマートフォンを回転させたりしてみてください。ビューポート、ブレークポイント、画面の向きがすぐに更新されます。
- ブレークポイントのパネルを見ると、現在の幅でTailwindとBootstrapのどのブレークポイントが適用されているかがわかります。
- どのブレークポイントでもメディアクエリをコピーできます。また、自分の数値を下の端末一覧の表と比べることもできます。
- デザインは画面解像度ではなく、ビューポートの幅を基準に考えましょう。1920ピクセルの画面でも、ブラウザーのウィンドウは1200ピクセルしかないことがあり、レイアウトが使えるのはそのウィンドウの中だけです。
- 幅360ピクセルと390ピクセルで表示を確認しましょう。多くのAndroidスマートフォンは360から412 CSSピクセル、最近のiPhoneは375から440を報告するため、360で問題なく表示できるレイアウトならほとんどのスマートフォンに対応できます。
- 画像は表示サイズの2倍の大きさで用意するか、srcsetを使いましょう。そうすれば、ピクセル比が2以上の画面でもくっきりと表示されます。
- ブラウザーの拡大・縮小を行うと、ビューポートとピクセル比の両方が変わります。数値がおかしいと感じたら、Ctrl+0またはCmd+0で拡大率をリセットしてから、もう一度確認してください。
よくある質問
モニターの仕様よりも画面解像度が小さく表示されるのはなぜですか？
ブラウザーはサイズをCSSピクセル単位で報告します。たとえば4Kモニターで表示を150%に拡大している場合や、Retinaディスプレイを搭載したMacのように、OSが画面の表示を拡大していると、1 CSSピクセルが複数の物理ピクセルにまたがります。物理的な解像度を知りたい場合は、画面サイズにここで表示されているデバイスピクセル比を掛けてください。
画面サイズとビューポートサイズの違いは何ですか？
画面サイズはディスプレイ全体の大きさです。ビューポートサイズは、ブラウザーのウィンドウのうちページが表示されている部分の大きさで、アドレスバー、タブ、ツールバー、横に固定したパネルなどは含まれません。Webサイトのレイアウトはビューポートを基準に組まれるため、レスポンシブデザインではこちらの数値を使います。
デバイスピクセル比とは何ですか？
1 CSSピクセルを描画するために、縦横それぞれの方向で使われる物理ピクセルの数のことです。比が1なら標準的なディスプレイ、2は高精細な画面を搭載したノートパソコンやタブレットでよく見られ、3はスマートフォンでよく見られます。この値は、ページを拡大・縮小したときにも変わります。
レスポンシブデザインにはどのブレークポイントを使えばよいですか？
まずは使っているフレームワークの初期設定から始めましょう。TailwindとBootstrapの初期値はこのページに載せています。そのうえで、自分のコンテンツが窮屈に見えたり、間延びして見えたりし始める幅にブレークポイントを追加します。ブレークポイントは特定の端末ではなく、コンテンツに合わせて決めるべきものです。
自分の端末の情報は保存されますか？
いいえ。数値はお使いのブラウザーの中で読み取られ、このページに表示されるだけです。私たちに送信されることも、どこかに保存されることもありません。
CSSピクセルと物理ピクセル
- CSSピクセルは長さの単位であって、画面上の1つの点のことではありません。ピクセル比が3のスマートフォンでは、100×100 CSSピクセルのボックスが300×300の物理ピクセルで描画されます。そのため、パネルの幅が1179ピクセルあるスマートフォンでも、Webサイトに対しては幅393ピクセルとして報告されます。ブラウザーは読みやすい大きさでページを表示しつつ、より細かい描写で描いているのです。
- レイアウトで考慮すべきなのはCSSピクセルだけです。ただし画像では物理ピクセルも重要になります。CSSピクセルでボックスの幅とちょうど同じ大きさの画像は、ピクセル比が2や3の画面ではぼやけて見えるからです。
実際のブレークポイントの使い方
- TailwindとBootstrapはモバイルファーストで設計されています。接頭辞の付いていないスタイルはすべての幅で適用され、各ブレークポイントは、その最小幅以上のときにルールを追加していきます。Tailwindのmdはタブレットだけを指すのではなく、幅768ピクセル以上を意味します。
- このページのブレークポイントパネルは、これらのフレームワークのメディアクエリと同じ方法でビューポートを測定しています。そのため、パネルに表示されているのは、いまこのウィンドウで実際に有効になるクラスの組み合わせです。
Tailwind CSSとBootstrap 5のデフォルトの最小幅ブレークポイント
主要な端末のビューポートサイズ（CSSピクセル、縦向き）とピクセル比、物理ピクセル
- 種類
- 端末または設定
- ビューポート（CSS px）
- ピクセル比
- 物理ピクセル
- スマートフォン
- iPhone SE（第2・第3世代）
- スマートフォン
- iPhone 15 Plus、16 Plus
- スマートフォン
- Samsung Galaxy S24
- タブレット
- iPad Pro 11インチ（第4世代）
- ノートパソコン
- MacBook Air 13インチ（M2、初期設定）
縦向き
横向き
{name}のメディアクエリをコピー
画面 {sw}×{sh}（物理 {pw}×{ph}）、ビューポート {vw}×{vh}、デバイスピクセル比 {dpr}
いまのあなたの画面
画面解像度（CSS px）
縦横比 {ratio}
物理解像度
画面 × デバイスピクセル比
ブラウザーのビューポート
ページのレイアウトに使われる領域
デバイスピクセル比
ブラウザーの拡大率によって変わります
利用可能な画面領域
画面からタスクバーやDockを除いた領域
画面の向きと色
{orientation}、{depth}ビット
タッチスクリーンを検出しました
タッチスクリーンは検出されませんでした
これらの数値をコピー
画面の情報を読み取っています。JavaScriptが必要です。
いまどのブレークポイントにいるか
ビューポートの幅{width}で測定しています。ウィンドウのサイズを変えると、表示が変わる様子を確認できます。
（{vw}px）
ブレークポイント
主要な端末の画面サイズ
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る