画面解像度チェック
画面の実際の解像度とピクセル比、ビューポートをリアルタイム表示。
物理ピクセル数：CSSサイズ×ピクセル比
- サイズ変更にリアルタイム対応
- ピクセル比を表示
- スマホやタブレットでも使用可能
画面解像度の確認方法
- 確認したい端末でこのページを開きます。
- 下のボックスで解像度とピクセル比を確認します。
- ウィンドウのサイズを変えたり端末を回転させたりして数値の更新を見ます。
よくある解像度とその用途
| 名称 | 解像度 | 主な用途 |
|---|---|---|
| HD | 1280×720 | 古めのノートパソコンや普及価格帯のノートパソコン |
| フルHD | 1920×1080 | 現在販売されているほとんどのノートパソコンとモニター |
| QHD（1440p） | 2560×1440 | 高性能なモニターや一部のスマホ |
| 4K UHD | 3840×2160 | 高性能なモニターやテレビ |
物理ピクセルとCSSピクセルの違い
CSSピクセルはウェブページのレイアウトに使われる単位ですが、必ずしも画面上の1つの物理ドットと一致するわけではありません。ピクセル比は、1つのCSSピクセルにいくつの物理ピクセルが詰め込まれているかを示す数値で、比率が2ならパネルはウェブサイトが使う1CSSピクセルごとに、2×2に並んだ4つの物理ピクセルを描画しています。
高精細なスマホやノートパソコンの画面は、より小さいCSSサイズと2または3のピクセル比の組み合わせで表示され、ほとんどのデスクトップモニターはピクセル比1で、CSSピクセルと物理ピクセルが1対1で一致します。
解像度を変更する方法
- Windows 11では、設定、システム、ディスプレイを開き、ディスプレイの解像度のプルダウンから別の項目を選びます。
- macOSでは、システム設定、ディスプレイを開き、ディスプレイの解像度の設定に表示される「デフォルト」またはスケーリングされた項目のいずれかを選びます。
- スマホやタブレットを回転させたり、パソコンでブラウザウィンドウのサイズを変えたりすると、実際のディスプレイ解像度を変えなくても、このページのビューポートの数値がリアルタイムで更新されます。
画面解像度チェックのFAQ
ディスプレイ設定と違う数値が表示されるのはなぜですか？
WindowsやmacOSのディスプレイ設定は選んだ解像度を表示しますが、スケーリングが有効な場合、これはパネル本来の解像度より低いことがあります。このページはブラウザが認識している値にピクセル比を掛けた数値を表示します。
devicePixelRatioとは何ですか？
物理ピクセルとCSSピクセルの比率です。比率が2の場合、CSS1ピクセルが物理4ピクセルで描画されており、これはスマホの画面やほとんどの最新のノートパソコンで一般的です。
ビューポートが画面サイズより小さいのはなぜですか？
ビューポートはブラウザウィンドウ内の表示可能な領域なので、タスクバーやブラウザのツールバー、画面上の他のウィンドウは含まれません。
スマホやタブレットでも使えますか？
はい。モバイルブラウザでページを開き、端末を回転させれば縦向きと横向き両方の数値を確認できます。
モニターにはどの解像度を選べばいいですか？
ディスプレイ設定で「推奨」と表示されているものを選んでください。これはパネル本来の解像度と一致します。LCDモニターを本来の解像度より低く使うと、画像を拡大処理する必要があるため文字や細部がぼやけやすくなります。
同じ画面サイズの2台のスマホで違う数値が表示されるのはなぜですか？
メーカーは物理的なサイズが近い画面でも独自のピクセル密度とCSSのスケーリング係数を選んでいるため、対角線の長さが近い2台のスマホでも解像度とピクセル比の両方が異なって表示されることがあります。
解像度と画面サイズの違いは何ですか？
解像度は画面を横切るピクセルの数を数え、サイズは物理的な対角線の長さをインチで測ります。同じ解像度をより小さい画面に詰め込むとピクセル密度が高くなるため、スマホの画面はピクセル数が同じモニターより近くで見ると鮮明に見えます。