Snaplytics JS Tests

画面解像度テスト

ディスプレイのネイティブ解像度を物理ピクセル単位で、ピクセル比・アスペクト比・色深度とともに確認できます。その後、全画面1ピクセルテストパターンを起動します: 真のネイティブ解像度ではきれいで均一なテクスチャとして読み取られ、拡大縮小や非ネイティブモードではぼやけやモアレとして現れます。

ネイティブ解像度

検出中…

ライブ
CSSビューポート
ピクセル比
アスペクト比
色深度
テストパターン

パターン切替

パターンの読み方
鮮明で均一なテクスチャ

交互のピクセルが滑らかなグレーに溶け合います — ディスプレイはネイティブ解像度・100%スケーリングで動作しています。

柔らかいまたはぼやけ

画像が引き延ばされています — 解像度がネイティブ未満に設定されている可能性が高く、GPUがアップスケーリングしています。

モアレまたはバンディング

波打つパターンは補間に由来します。ブラウザのズームを100%にリセットし、OSのディスプレイスケーリングを確認してください。

画面解像度とは、ディスプレイが表示するピクセルの数を指し、横 × 縦の形式で表されます — たとえば 1920 × 1080。同じ面積により多くのピクセルがあるほど、鮮明で密度の高い映像になります。すべてのフラットパネルは、表示するために作られた物理ピクセルの固定グリッドを持っており、これをネイティブ解像度と呼びます。その解像度で動作するとき最も鮮明に表示されます。このテストはブラウザが報告する物理ピクセルグリッドを読み取り、上の大きな数字として表示するので、ハードウェアが実際に何を出力しているか確認できます。

より低い解像度を選択すると、GPU は固定グリッド全体に小さな画像を引き伸ばすため、全体がぼやけます。最新のシステムではディスプレイスケーリング(Retina、Windows 150%)も追加されており、フル密度でレンダリングしながらインターフェースを大きく表示します。そのため、ブラウザは2つのサイズを報告します:論理ピクセルで表した CSS ビューポートと、実際のデバイスピクセルで表した物理解像度です。両者の比率がデバイスピクセル比(DPR)です — DPR が 2 の場合、各 CSS ピクセルは 2 × 2 の物理ピクセルブロックに対応するため、ブラウザが認識するビューポートは画面解像度の半分になる場合があります。

一般的な画面解像度

解像度名称使用場面
1280 × 720HD / 720p旧型ノートパソコン、エントリーレベルのディスプレイ
1920 × 1080Full HD / 1080p最も一般的なデスクトップおよびノートパソコンの解像度
2560 × 1440QHD / 1440pより鮮明なゲーミングおよび作業用モニター
3440 × 1440UltraWide QHD21:9 ウルトラワイドパネル
3840 × 21604K UHD大型・高DPIスクリーン、テレビ
1170 × 2532iPhone (DPR 3)最新スマートフォン — 縦長の高密度パネル

正確な計測のためのヒント

  • ブラウザのズームを 100% にリセットしてください — ズームはOSとは独立してページを再サンプリングします。
  • Windowsの場合、Settings > System > Display の「(Recommended)」とマークされた解像度を選択してください。
  • macOSの場合、System Settings > Displays で「Default for display」を選択してください。
  • 全画面パターンを実行してください:均一できれいなグレーはネイティブ出力を意味し、ぼやけやモアレはスケーリングを意味します。