viewport と density について

　viewportについて調べていたら、そもそもpx(ピクセル)って何？ってとこまで来ちゃったので、自分なりにまとめておきます。間違っていたら、ぜひ突っ込んで欲しいです。。

pxとdpi

　pxという単位は長さの指定に使います(width=800pxと指定したり、画像ファイルの大きさを64×64と表示したり)。長さとは言っても、mmやインチのような絶対的な長さではなく、あくまでそのディスプレイのドットの最小単位を1pxとした時の相対的な長さを表します。
　ドットの最小単位の大きさはディスプレイによって違います。当然ながら、最小単位が小さければ小さいほど、細やかな曲線や色彩を表現できて、綺麗な映像になります。その画素密度を表す単位が、dpi (dot per inch)で、1インチ(2.54cm(平方cmではない))の中にドットがいくつ並ぶかを表します。ちなみにパソコンのディスプレイは100dpi前後が多いみたいです。スマホやタブレットのディスプレイは160dpiぐらいから最近では440dpiなんていう超高解像度のものも出ていてパソコンより遥かに細やかな表現力があります。そしてスマホの高解像度化のスピード感は半端ないです。凄まじい勢いで超高解像度の新型ディスプレイが登場しています。
　ところで、先程、pxは相対的な長さを表す単位だと言いました。ドットの最小単位を1pxとして相対的な長さを表すと。けどそれだと、せっかく画素(ドットの最小単位)が細かくなって細やかなラインを出せるようになってもその分、画像が小さくなると思いませんか？？
　例えば、iPhone3GSのディスプレイの解像度は320×480なのですが、そのiPhone3GSで見やすいwebサイトを作ろうと思って横幅320pxのサイトを作って、画面ピッタリで見れて喜んでいたら、iPhone4が発売。そのディスプレイの解像度はなんと640×960で、3GSの倍の細やかさを表現できる。違う言い方をすれば、画面の左端から右端までの距離をpxで表すとiPhone3GSでは320pxだったのがiPhone4では640pxに伸びてしまったわけです(実寸は変わってないのに)。ということは画面ピッタリに入るはずの横幅320pxで作ったサイトは、画面のちょうど半分に収まってしまうことになります。おいおい、いくら画像が細やかでもその分小さくなったら意味ないやろ！
　と、こんなことになりそうですよね？けど、どうやらそうはならないみたいです。

densityに基づいた長さ

　androidもiPhoneも解像度160dpiが基準になるように設計されています。繰り返しになりますが、160dpiというのは、1インチの中にドット（px）が160個ある細やかさを表します。それを基準にするとはどういうことかと言うと、160dpiをdensity（密度）1として、densityが1の時の1ドット（1px）を長さ1pxとするんです。解像度320dpiの端末ならdensityが2になるので、1ドット（1px）が長さ0.5pxになります。言ってることがよく分からないですよね。同じ「px」という単位で1つのドットを指したり、長さを表す単位になったりするからややこしいんです。
　分かりやすくする為に長さを表す「px/d」という単位（dはdensityのこと）を勝手に作ってしまいましょう。その解像度（ドットの大きさ）に関わらず、ドットの1単位はpx、長さの1単位はpx/dです。つまり、densityが2(320dpi)ならば、1px(1ドット)が0.5px/dになり、1px/dは2px(2ドット)になるんです。はぁややこしい。。
　そして、大事なのは、webサイトを作る時にcss等で要素の長さをpxで指定しますが、その「px」というのはここで言う「px（ドット）」ではなく「px/d（densityに基づいた長さ）」を指しているんです。だから、先ほどのiPhoneの例のように端末の解像度が倍になったからと言って、半分の大きさに表示されることはないんです。解像度が倍になれば、1pxは0.5px/dになるからです。
　ちなみにdpiは163とか216とか半端な数字なのですが、densityは160dpiを基準として今のところ4段階に分類されているようです（この辺正直よく分かりませんが・・）。

分かる範囲で各端末の解像度とdensityの関係をまとめておきます。

　要はdpi(画像密度)が倍になろうと半分になろうと、スマホの画面の横幅の長さは320px/dぐらいになるわけですね。androidに関してはいろんなメーカーがいろんな端末を出しているので、微妙な差がありますが、iPhoneに関しては今のところ、どの機種も横幅320px/dで統一されています。

注）「px/d」というのは説明の為に使っただけでそんな単位はありません。densityに基づいた長さも普通に「px」で表されます。css等で指定する時に使う「px」も、意味的には、ドットを意味するpxではなく、densityに基づいた「px/d」を指します。これがややこしいところです。

viewportとは？

　やっとviewportの登場です。。
　viewportとは、スマホのブラウザでwebサイトを表示する際の表示サイズを設定する為のメタデータです。上記の通り、スマホの画面というのはそのディスプレイの解像度に関わらずどの機種も横幅が320pxぐらいとして表示されます。しかし、ブラウザでwebサイトを見る時に限っては話が違うようです。その場合、ブラウザの横幅（width）が擬似的に

• iosでは、980px
• android2.xでは、800px
• android3.x、4.xは、980px

として表示されます。実際はそんなに解像度は細かくないのに無理やり表示される内容を縮小して画面内に収めているんです。パソコンで普通に見ている画面（13インチぐらいの画面）をそのままスマホサイズ（4インチ前後）に縮めて見ているような状態です（おそらくスマホでパソコンのサイトを見る為にこういう仕様にしたんだと思います）。パソコンよりもスマホの方がディスプレイの解像度は細かいので、縮小されても見えなくもないですが、小さな字は読めないぐらいに縮小されます。
　ダブルタップして画面を拡大表示したら字も大きくなるし、勝手に文章の改行する位置が変わったりしてくれるので、それはそれで非常に便利なんですが、そんなパソコンで見る用の表示内容（レイアウト）を拡大させてその一部を小さい画面で見るのではなく、スマホならではのサイズ（レイアウト）で画面を表示させたい時、つまりスマホ用のサイト（縦にしかスクロールしないようなサイト）を表示しようと思えば、viewportの設定をいじる必要があります。

viewportの設定の仕方

　htmlのheadタグ内で、

<meta name="viewport" content="設定内容">

という風に設定します。
設定できるプロパティの主要なもの5つを説明します。

width

ブラウザの横幅を擬似的にを何pxと仮想するかの設定。
設定可能範囲：200～10,000px、あるいはdevice-width。
デフォルトでは上記のように機種による

initial-scale

読み込み時の表示倍率。
設定可能範囲：minimum-scale ～ maximum-scaleの値。
デフォルトでは1.0？

user-scalable

ユーザーに拡大縮小操作をさせるかさせないかの設定。
設定可能範囲：yesかno
デフォルトではyes

minimum-scale

最小倍率。
設定可能範囲：>0～10。
デフォルトでは 0.25。
コンテンツの幅いっぱいいっぱいまでしか小さくならない（と思う）

maximum-scale

最大倍率。
設定可能範囲：>0～10。
デフォルトでは 1.6。

複数のプロパティを設定するには、

<meta name="viewport" content="width=device-width,initial-scale=1">

このようにコンマで区切りながら書きます。

ブラウザの仮想widthとdensityに基づいたwidth

　webサイトを作る時、cssでコンテンツの幅（div#wrapper等）をリキッドレイアウト（%で指定）にした場合にその100％がviewportのwidth（ブラウザの仮想px数）を指します。
　上記のように、viewportのwidthに何も設定していない（デフォルト）状態ではiphone,android3.x,4.xのブラウザでは100%が980px、android2.xのブラウザでは100%が800pxになります。
　iPhone用のサイトを作ろうと思えば、iPhoneの横幅は320px（densityに基づくpx）なので、viewportのwidthを「width=320px」にしてしまってcssでdiv#wrapperのwidthを100%にすれば、ぴったりiPhoneのディスプレイの横幅に合うサイトが作れます。けどandroidに関しては全部が横幅320px（densityに基づいたpx）というわけではありませんので、デバイスによっては半端なレイアウトになることもあります。
　そこでやっと登場、「width = device-width」です。「device-width」というのは、そのデバイスのdensityに基づいた横幅（320px等、機種による）のことなんです。viewportのwidthを「width = device-width」にすると、「ブラウザの仮想width = そのデバイスのdensityに基づいた横幅」になってくれるわけです！なので、viewport設定を「width = device-width」にして、cssでサイトの横幅を100%に指定すれば、どの機種で見てもぴったり画面いっぱいいっぱいのサイトが出来上がるんです（拡大縮小されたくなかったらviewportの設定に「user-scalable=no」も付け足せばOK）。
　随分、遠回りした説明になりましたが、お分かり頂けますでしょうか？？納得してくれた方は「いいね！」をポチッとやってもらえると嬉しいです。間違ってるぞ、とか良く分からんとかって言う人はコメント欄にてお願いいたします。
　もう一つ、「width = device-width」にして、スマホで見た場合は上記の通りなんですが、パソコンで見た場合は、「device-width」というのはウィンドウの横幅を指します（古いブラウザは否対応）。つまり「width = device-width」にした上でリキッドレイアウトにしていると、ウィンドウの大きさを変えるとそれに伴ってレイアウトも動くわけです。

あとがき・・

　いろいろwidth以外のプロパティもいじってみたのですが、他は何故か全然思ったようになってくれません・・。私の環境（htc desire HD）が悪いのか？それとも何か間違っているのか、原因不明です。忘備録でも何でもないな・・。
　ちなみにこのサイトは実はviewportは一切設定していません。で、Media Queryを使って、タブレットやスマホの場合はdiv#wrapperを100%にして、パソコンの場合はdiv#wrapperを1020pxで固定しています。スマホで見る場合、やたらコンテンツの量が多くて縦に長～いサイトの場合、拡大縮小ができたりサイドバーがある方が見やすいんじゃないかな？と個人的には思います。

※2014年2月25日 サイトデザインを変更しました

今だけ→転職できなければ全額返金の「エンジニア転職保証コース」
絶対エンジニアになる！→テックエキスパート

フリーランスエンジニアの収入例を見てみる→レバテックフリーランス