こんにちは！割り算が嫌いなMizutani(@sirycity)です。28歳になっても嫌い...

今日はそんな割り算...もちょっと関連するRetinaディスプレイとCSSについてです。半分ネタ記事です。

Retinaディスプレイとは

RetinaディスプレイはAppleが作ったすごい綺麗なディスプレイです。以上。いやもっと詳しく色々あるんですが今回は割愛します。CSSにおいては綺麗でめんどくさいということだけ覚えておけばOKです。

Retinaはめんどくさい？

そう、Retinaディスプレイはめんどくさいんです。少なくともCSSのコーディングにおいては。なぜめんどくさいのかを今から書いていきます。

Retina誕生物語

めんどくささを理解する上ではまずはRetinaの概念を理解しよう。

デバイスの解像度は上がり光の粒が増えた

当たり前ですが昔のPCや携帯電話より今のPCやスマホの方が解像度が良いです。言い方を変えるとディスプレイ上にたっくさんある光の粒の数も多くなったということです。

光の粒が増えれば画面も端末もでかくなっていく

あくまでイメージですが、入ってる光の粒が多くなっていけば画面も大きくなっていきます。教科書が増えればランドセルが大きくなるかんじ。んで、画面が大きくなっていけばスマホやPCの端末も当然大きくなります。

人間の大きさは変わらない

一方人類は何千年とほぼ同じ大きさです。まあちょっと大きくなったかもしれんけど、だいたい同じとしましょう。

スマホの画面が大きくなったら...

ということはですね。端末が大きくなっていくといずれ問題が起こるわけです。そう、人間が持てなくなる。そりゃそうです。端末と同じスピードで人間が巨大化すればいいんだけどね。無理だね。

光の粒を詰め込む

そこで何が起こるかというと、光の粒を詰め込む技術が発達するわけです。そりゃそうだ。光の粒が多くなっても人間は大きくならないってことは、同じ面積に光の粒をたくさん詰め込むしかないです。教科書の入れ方を工夫するイメージですね。

ちなみにこの指標を**device pixel ratio(デバイスピクセル比)**と言い、この値が大きいほどたくさん詰め込んでる、言い換えると画面が綺麗ってことです(正確にはちょっと違うけど)。昔の端末は1、最新のスマホだと3とかです。

デバイスピクセル比とRetina

そしてこのデバイスピクセル比ですが2以上のことをRetinaと表現されることがあります。はい。Retina誕生。まあ微妙に経緯は違うんですが、だいたいこんな感じです。大事なのはRetinaが詰め込んでいるってことです。

Retinaめんどくさい物語

ここからはなぜRetinaがめんどくさいか、です。

前提として人間の視力は不変

まず、人間の視力は大きく変化しないと仮定します。まあこれも微妙に変わってそうだけど。

昔のスマホの解像度は？

iPhone3Gを例にしましょう。こいつの解像度は横320pxです。

ってことは大きさ16pxの文字なら20文字入りますね。まあ妥当な範囲ですね。

今のスマホの解像度は？

iPhone14を例にしましょう。こいつの解像度は横1170pxです。

ってことは大きさ16pxの文字なら73文字入りますね。...えっ？

サイトのレイアウト、変わりすぎ...？

こんなことが起こってたまるかという話です。たかだか10年ちょいで画面に入る文字数が3倍以上になりました。人間の視力が10年で3倍になりますか？こんなことされたら昔作って放置されているWebサイトはレイアウト崩壊です。世界中のWebデザイナーが激怒します。

安心してください

でも大丈夫。そうはなってません。なってたまるか。昔のスマホでも今のスマホでもレイアウトはまあ大体同じです。安心して。

解像度がこんなに違うのに見た目は同じ？

※このあたりからややこしくなります

でも、解像度が3倍以上あるのに見た目が同じなんておかしいですね。なんででしょう？

結論から言うと解像度が高くなってもCSSさんは高くなったことに気づいてません。例えばiPhone14は1170pxですがCSSさんサイドは390pxだと思ってます。だからiPhone3Gの320pxと大して変わらんってことです。

CSSはうっかりさんなのか

えっどういうこと？CSSさんはお茶目なの？って話ですが勿論違います。CSSさんは解像度を解釈する時に解像度を見ているわけではないんです。CSSさんは解像度を次の式で解釈します。

CSSさんの解像度 = 実際の解像度 / デバイスピクセル比

つまり

• iPhone3G(デバイスピクセル比1)は320 / 1 = 320
• iPhone14(デバイスピクセル比3)は1170 / 3 = 390

ってことです。

何だその計算式は

随分とふざけた話です。本当の解像度とCSSの解像度が違う？解像度320だったら光の粒が横に320個並んどるんとちゃうんか。どうしてこうなった。昔はもっとシンプルだったぞ。

互換性のためだよ

まあ答えは単純で、インターネット全体の互換性を重視するためです。昔作ったサイトが全然見れなくなったら大変だからね。昔がシンプルだったのは全部デバイスピクセル比が1だったからです。

悪いのは人類

とどのつまり、綺麗な映像が見たいという愚かしい人間の欲望によりデバイスピクセル比という概念が生まれCSSに複雑性をもたらしたというのが真実な気がします。人間さえいなければRetinaは生まれなかった。

結論

RetinaがなぜCSS上で複雑かというと、CSSの上○○pxが解像度○○pxと異なり、光の粒が○○個並んでいるわけでもないという現象を起こすから...ということです。分かってしまえば簡単で、我々がCSSを書く時は実際の解像度をデバイスピクセル比で割った数だけを見ておけばよいです。最後にこの言葉で結びたいと思います。以上。

人は愚かなものです 特におまえ