解像度における用語について教えてください。

Question

現在、解像度について調べております。
調べていると様々な用語が散見されます。

質問1

下記の用語はそれぞれほぼ同義と捉えていますが、私の理解に誤りはありますか？

• (デバイスピクセル = 物理ピクセル) ≒ 物理解像度
• (デバイス非依存ピクセル = CSSピクセル = 論理ピクセル) ≒ (論理解像度 = 疑似解像度)

質問2

仮に質問1がYESで、ほぼ同義にもかかわらず様々な用語があると、どの用語を使うかべきか迷います。
W3CやRFC、ISO/IEC、Apple、Googleなどの団体やベンダーなどで、よく使われている用語はありますか？
もしくは、感覚でも構いませんので、よく見聞きする用語を教えてください。

ご存じの方いれば、ご教示ください((_ _ (´ω｀ )ﾍﾟｺ

Answer 1

後半は自信が無いですが、回答します。
私の回答には誤りがありそうなので、コメントしてもらえればと思います。

オセロを思い浮かべてください、8*8のマス目がありますよね。

このマス目１つ１つがデバイスピクセルまたは物理ピクセルになります。そのためデバイスピクセルと物理ピクセルはイコールでいいと思います。
しかし、物理的解像度は8*8の事を指すのでニアリーイコールでは無い、全く別物だと考えられます。

次にマス目に駒を置いていくとします。
オセロのルールでは1駒は1マスの中に入れるルールですね。このルールに則り配置したものがCSSピクセルになります。

次に盤のマス目が変わり1616や3232になったとします。
この盤で88のオセロを行うときにルールを書き換える必要があります。1616の時は1マスを2マスに、32*32の時は1マスを4マスに書き換えます。これがデバイス非依存ピクセルです、ルールはOSが決めています。

このため、CSSピクセルとデバイス非依存ピクセルはニアリーイコールでは無いと考えられます。
別にCSSピクセル比と言うものがありますが、
これは駒を複数に分割したときに、何個に分割したかを表す比なのでやはりデバイス非依存ピクセルとは異なると考えられます。

CSSピクセルは確実に論理ピクセルと言えますが、デバイス非依存ピクセルはどちらかと言うと特定基準で変換されたピクセルなので論理ピクセルとイコールかは怪しいです。

論理的解像度は一定の範囲の中にどれくらいの論理ピクセルを敷き詰めるかを表しているのでイコールにはならないと考えられます。
擬似解像度は駒をどのくらい分割したあとの解像度だと思うのでこれもイコールにはならないと思います。

呼び方については全て微妙に異なる上に語源が異なることがあるので文脈に合わせて呼び方を明確に分けるべきだと思います。

Comments

[7968]

回答ありがとうございます。
また、御礼が遅くなり申し訳ございません。
回答を参考にいろいろと調べておりました。
お陰様で理解が進みました。

仰る通り、解像度とは一定のサイズ内にあるピクセル数を表すため、ピクセルと解像度を同じ扱いというのは誤りで、雑な理解をしておりました^^;
申し訳ございませんm(__)m

調べる中で新たにビューポートサイズも出てきて不明が点がありまして、もしお時間があればお付き合い頂けると嬉しいです。

# デバイス解像度とCSSピクセル解像度とビューポートサイズについて

私の中でビューポートとはブラウザの表示領域のことでブラウザサイズと同義と考えております。

iPhone6を例に記述します。
[ここ](http://www.kylejlarson.com/blog/iphone-6-screen-size-web-design-tips/)にiPhone6の各サイズについて記載があります。
750 x 1334 はデイバスサイズ（デバイス解像度）になり、375 x 667 はCSSピクセル解像度になるかと存じます。

[ここ](http://www.quirksmode.org/mobile/metaviewport/notes.html)に各デバイスごとのデフォルトのビューポートのサイズがあります。
iPhoneのデフォルトのビューポートは980pxです。
ビューポートのサイズはmeta属性で指定できます。
[ここ](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193)の Viewport properties にviewportに指定できるプロパティと値が記載されています。
`width`プロパティには`device-width`が指定できます。
説明には `The width of the device in pixels.` とあり、CSSピクセル解像度（論理解像度）を指定できます。
草案段階ですが [CSS Device Adaptation Module Level 1](https://www.w3.org/TR/css-device-adapt-1/) にも 「いくつかの既存のUA実装では、デバイスのサイズをCSSピクセルで使用し、一部はデバイスの幅/デバイスの高さにウィンドウのサイズ（CSSピクセル）を使用します。」とありますので、CSSピクセル解像度（論理解像度）が指定されるかと思います。
実際に`width=device-width`を指定して、JSで`documentElement.clientWidth`を記述したページをiPhone6で表示すると 375 と表示されます。

これで、デバイス解像度とCSSピクセル解像度とビューポートの3つのサイズが出てきました。
CSSピクセル解像度とビューポートサイズの関係について理解できておりません。
例えば、meta属性でviewportを指定しない場合、デフォルトの 980 という値になるかと思います。
そのため、ビューポートサイズは 980 ということになるかと思います。
このときのCSSピクセル解像度は 980 ということでしょうか？それとも、375のままなのでしょうか？
CSSピクセル解像度とビューポートサイズが別々だった場合、どのような関係なのでしょうか。

お時間があるときで結構ですので、直接的な回答ではなくても、参考になるサイトや書籍等でも結構ですので教えて頂けると幸いです。
お時間がないようであれば、新たに質問をたてたいと思います。

---------------------

追記

調べるほど、新しい用語や単位が出てくるため、混乱していますが、アプリ開発とWebサイト制作を混在して考えているのが原因ではないかと考えております。
私はアプリ開発ではなく、Webサイト制作の理解を深めたいと考え、各用語などを調べております。
viewportはブラウザにおける設定ということは理解しておりますが、iOSにおけるポイントという単位だったり、Androidのdp（dpi）という単位だったり、ピクセルの Logical pixels、Rendered pixels、Physical pixelsだったり、現時点ではアプリ開発で必要な内容なのか、Webサイト制作でも必要な内容なのか区別できるほどの理解がありません。
今までアプリかWebサイトか意識せずに調べておりましたが、どちらの内容なのか考えながら調べてみたいと思います。