##始めに
ニートから見習いエンジニアに転職して約1ヶ月。
HTML、CSSと格闘する毎日。
そんな中、スマホ用のサイトを構築する事になった時のお話。
##3倍Retina!?
今回スマホ用のサイトを構築するに当たって、要件の一つにRetina対応があった。
Retinaについて調べてみると、3倍Retinaなる物の存在を知り、
どのように違うのか気になったので検証してみた。
###そもそもRetinaとは
Retinaディスプレイ(英語:Retina Display)は、アップル製品のうち、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」(レティナ)は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている[1]、ということから命名された。
”Retinaディスプレイ”『ウィキペディア (Wikipedia): フリー百科事典』
更新日時:2019年6月6日 (木) 07:11 URL: http://ja.wikipedia.org
ざっくりと説明すると、画像を描画する点の集まりが今までの倍!
より鮮明に綺麗に表示されるという事。
###ここで疑問が…
通常のRetinaですら人の目で識別できる限界を超えるほど画素が細かいのに、
さらに画素の細かい3倍Retinaは必要なのか…?
他のエンジニア方もあまり気にしていなかったみたい…
###実際にやってみた
今回は先輩のiPhoneXをお借りして検証。
等倍の画像、Retina対応の画像、3倍Retina対応の画像を並べて比較してみた。
See the Pen agOqoB by ShunyaTsukamoto (@ShunyaTsukamoto) on CodePen.
###結果
等倍とRetinaの違いははっきりと確認できるが、
Retinaと3倍Retinaの違いはぱっと見では分からなかった。
強いて言うならば、Retinaと3倍Retinaを拡大、比較した際に、
光の加減が少し違うかもしれないという違いだけだった。
###感想
個人的には今の所3倍Retinaは必要無いように感じた。
ただ、今後要件の上がる事があるかもしれないので
頭の片隅に置いておく事にする。