polyshデバイスピクセル比チェッカー
デバイスピクセル比と、その画面で鮮明に見える書き出しサイズがわかります。
- ブラウザ内で動作
- アップロード不要
- アカウント不要
ブラウザツールを読み込んでいます…
デバイスピクセル比チェッカーでできること
Retina や HiDPI の画面では、1 CSS ピクセルを複数の物理ピクセルで描画します。デバイスピクセル比はその数を表し、標準的なモニターでは 1、ほとんどの Mac では 2、多くの Windows ノートパソコンでは 1.25 か 1.5、スマートフォンでは 3 であることが多いです。
この数値で、小さなストレスの多くが説明できます。スクリーンショットが思ったより 2 倍大きくなる、ロゴがぼやける、画面録画が共有したウィンドウより大きくなる、などです。レポートでは、この比を実用的なサイズに置き換えます。1280 × 720 の領域が何ピクセルでキャプチャされるか、画像を何倍で書き出せばよいかがわかります。
例
お使いの環境
既定のスケーリングの MacBook ディスプレイ、ブラウザのズーム 100%
レポートの表示
デバイスピクセル比：2× 1 CSS ピクセル = 2 × 2 デバイスピクセル · 高密度（Retina / HiDPI） 1280 × 720 の領域のキャプチャサイズ：2560 × 1440 ピクセル 画像の書き出しサイズ：鮮明に見せるには、表示サイズの 2×
デバイスピクセル比チェッカーの使い方
- 調べたいディスプレイでページを開きます。
- 表で比と、キャプチャと書き出しのサイズを確認します。
- 比べるには、ウィンドウを別のモニターに移すか、ズームを変更します。
知っておきたいこと
- 1.25 や 1.5 のような小数の比では、書き出しの目安は 2× に切り上げます。ファイルサイズは少し大きくなりますが、画像は鮮明に保たれます。
- 比の高い画面のスクリーンショットは大きくなります。ドキュメント用には、スクリーンショットのリサイズで表示サイズに縮めてください。
- スマートフォンやタブレットはそれぞれの比を報告するので、対象者が実際に使うデバイスで確認してください。
デバイスピクセル比チェッカーについてよくある質問
デバイスピクセル比とは何ですか？
1 CSS ピクセルを描画するのに、縦横それぞれ何個の物理ピクセルを使うかを表す数値です。比が 2 なら、各 CSS ピクセルは 2 × 2 の 4 個のデバイスピクセルで描かれます。高密度の画面で文字がくっきり見えるのはそのためです。
スクリーンショットが思ったより 2 倍大きくなるのはなぜですか？
スクリーンショットは物理ピクセルで保存されるからです。2× のディスプレイでは、幅 1280 CSS ピクセルのウィンドウが幅 2560 ピクセルの画像になります。印刷や拡大用には大きいファイルのまま残し、ヘルプ記事用には半分にリサイズしてください。
画像は 2x と 3x のどちらで書き出せばよいですか？
ほとんどのノートパソコンとデスクトップの Retina 画面は 2× で足ります。3× が効果を発揮するのは、高性能なスマートフォンで原寸表示する画像だけです。大きな書き出しは通信量がかかるので、既定は 2× にし、細部が重要な場合だけ 3× を追加してください。
Windows でデバイスピクセル比が 1.5 になるのはなぜですか？
Windows のディスプレイのスケーリングが 150% に設定されているためです。システムがすべてを 1.5 倍に描画し、ブラウザはそれを比として報告します。14 インチや 15 インチのノートパソコンの多くは、既定で 125% か 150% のスケーリングで出荷されています。