PCやタブレットの画面サイズの話

筆者は今まで、テレビや自転車の大きさをインチで表すことに何の違和感も持たずに生活してきました。それは数値が大きければ大きいんだな程度の認識でした。そんな無関心さがたたって、PCのディスプレイを購入する際や、PC画像操作時のサイズ指定、HTMLのCSSの値設定などがどうも苦手です。「1ピクセルって何ミリなんだ？」って疑問がわいたりします。

なので改めてインチ(inch)とミリ(mm)、ピクセル(px)、ドット(dot)、解像度、dpiなどについて整理してみました。

1インチ＝25.4mm

混乱の一番のもとになっているのが、あまりなじみがないインチという単位です。これを25.4mmだと変換するとだいぶわかりやすくなります。

自転車のインチは車輪の直径を表しています。自動車のホイールサイズも同じです。

テレビやディスプレイのインチは「テレビのサイズ」によれば対角線の長さだということです。

テレビやディスプレイの場合はこれだけではサイズが決まりません。あと必要なのはアスペクト比(縦横比)です。「4:3」や「16:9」というアレです。

アスペクト比が決まると四角形の縦横のサイズが決まります。三角関数の「底辺の2乗＋高さの2乗＝斜辺の2乗」という公式です。

なのでイレギュラーな形のタブレットなどの縦横のサイズもこの計算を使えばできます。筆者は計算が苦手なので、ツールを作ってみました。

ちなみに、このインチの72分の1の大きさとして、フォントサイズ等でおなじみのポイント(pt)が存在します。1ポイントをミリに換算すると25.4mm÷72で0.35mmとなります。

ドットとピクセルの違い

ドットとピクセルの違いはないと筆者は今までそう認識していたのですが、Poto Cafetiria:「ドットとピクセルの違い」によれば違うものだそうです。

詳しくは先のページを参照していただければと思いますが、ドットは映像情報を表すことのできる最小の単位、ピクセルは色を表すことのできる最小の単位だそうです。

その為装置の構造によってドットとピクセルの値が一致しないことがあります。ディスプレイはRGBの3ドットで1ピクセルを構成しますが、インクジェットプリンタやデジカメなどは1ドット=1ピクセルとなります。

解像度

解像度は画面の画素数を指す言葉で横×縦で表記され、実際の画素数はそれを計算した値となります。画素はピクセルと同等の言葉です。

「ハイビジョン」とか「4K」も同義語です。ハイビジョン(HD)は1280×720の解像度を示します。4Kは3840×2160です。その間にフルハイビジョンという1920×1080という規格もあります。

パソコンの場合ディスプレイにより画面の解像度を変えられます。表示可能な解像度よりそれらの値が低い場合は、いくつかの画素をまとめて1画素とみなします。

そのようにして全体の画面のサイズを変えないまま解像度を下げると、ひとつの画素のサイズは大きくなります。パソコンでディスプレイの解像度を下げると映っているアイコンのサイズが大きくなるのはそのような原理です。

これを言い換えると、画面のサイズだけでは画像の質は決まらないということになります。画質は画面サイズ(インチ)と解像度とによって決まります。

dpi/ppi

同じサイズなら解像度が高い方が画質は高くなりますが、異なったサイズのディスプレイの画質を比較するにはどうしたらいいでしょうか。

その際はdpiという単位を使って比較します。(Dot Per Inch)です。これは1インチの中に何ドット存在するかという単位です。

ドットとピクセルは違うと前述しました。このdpiのピクセル版はppi(Pixcels Per Inch)となります。

ここでは詳しくは書きませんが、この他にディスプレイの質を決めるものとして画面の更新頻度(リフレッシュレート)といものもありますので、ディスプレイを探していてこの記事を読んでおられる方がいたらそちらの方も気にしてみてください。

アプリ内のdpi

ここまでくるとピクセルをミリに変換する方法がわかると思います。「ppi×ピクセル×25.4」です。しかしppiは環境によって違うので、ディスプレイに画像を表示させる場合はどこでも共通なミリやインチで表示させるのは難しいです。

ペイントソフト等アプリでdpiが設定されているものがあります。ブラウザやMSペイントなどがそうです。ブラウザのCSSやMSペイントで30mmを指定しても、あるディスプレイだと35mm、別のディスプレイだと28mmだったりしました。これはどういうことでしょう。

Google ChromeやMSペイントは96dpiに固定されているのですが(執筆時点)、96という値は@IT:「Windows 10でディスプレイの表示スケールの設定を変更して見やすくする」によればかつてのWindowsの推奨DPI値だそうです。これらはOSで「表示スケール」を変えても常に一定の大きさで表示されます。(スケールを変える際にファイルを開いている場合は一度閉じる必要があります)

このアプリ内の96dpiとは何を意味するのか考えるために次の図形を用意しました。上の四角形はCSSで30mmを、下は113pxを指定しています。96dpiで表示される場合は同じサイズになりますが、そうでない場合は異なるはずです。

しかしおそらくどのブラウザでもこの四角形は同じサイズでしょう。しかし30mmと指定したのにも関わらず、その大きさは表示環境で様々だと思います。筆者の環境では実際は34mmぐらいになっています。

ちょうど30mmという人もいると思いますが、そういう人はブラウザ拡大縮小をしてみてください。拡大縮小するということはdpi値を変化させているはずなのですが、そうしても2つの図形は同じサイズのまま拡大、縮小されます。

こうなる理由は次の記事の中に書かれていました。「<resolution>」「...CSS の in と CSS の px の比率は 1:96 で固定なので...」の部分です。

つまりブラウザやMSペイントにおける「96dpi」という設定は、実際のディスプレイのdpiがいくつであろうと96として処理する仕組みだという事です。実際のディスプレイが96dpiなら、ミリ指定と実寸が一致し、それより荒いなら実寸は大きくり、それより細かければ実寸より小さくなるという事です。

筆者が使っているディスプレイのdpiを調べてみると85dpiでした。96dpiの30mmは、85dpiでは33.9mmとなり、筆者のブラウザに映っている図形の実寸34mmと一致します。

これらの差はディスプレイの時のみ起きることで、これら二つのアプリは印字時は96dpiがプリンタ側で適用されますので意図したサイズになります。

ふたつのピクセル

指定した大きさと実際に表示される大きさが異なる別の理由もあります。

「スマートフォンと画面解像度・ピクセル密度」には、CSSピクセルとデバイスピクセルというものがあると書かれています。

要するにCSSで指定したピクセルの値が、デバイスで表示される際に変換されることを意味します。

この変換時の係数はJavaScriptの「window.devicePixelRatio」から確認できます。このプロパティはまだ「草案」になっていますが、多くのブラウザで値を読み出すことができます。

この値はCSSで指定した1ピクセルを、デバイスの何ピクセルで表示するかの比率になります。つまり値が1より大きい場合に高解像度ということになります。

ただし、高解像度ディスプレイの方が本来の画面の解像度より荒い設定に置き換えられるということになるので、見た目には荒く映ります。

逆算するとデバイスピクセルは
幅:screen.width×デバイスピクセル比
高:screen.hight×デバイスピクセル比
となります。

こちらの計算方法は「IPアドレスや画面解像度など確認くん」を参考にさせていただきました。ありがとうございました。

ちなみにdevicePixelRatioはブラウザの設定から画面を拡大、縮小しても変化します。デバイスピクセルを調べたいときはサイズは100%にしておきましょう。

JavaScriptでDPIの取得はできない

いろいろ調べてみたのですが、JavaScript経由で端末のdpiを取得することはできそうにありません。

WindowsのAPI経由や、 HWiNFO等からディスプレイのハードウェア情報を取得することはできます。

別の視点から見たらブラウザからディスプレイといえどハードウェアの情報が取得できてしまうのはセキュリティ的に問題になりそうです。そう考えてみると多分できないのだろうなという結論になりました。