retinaかどうかってcssで判別できるって知った。

@media (-webkit-min-device-pixel-ratio: 2){
hogehoge

-webkit-device-pixel-ratioというのを2にすると2倍の解像度をもつretinaのときにhogehogeを読み込む。

でもこれから出てくる端末は2倍とは限らない。
3倍とか2.1倍とか出てくるかもしれない。そういうときのために

-webkit-min-device-pixel-ratio:2とする。

minがついてるから、2倍以上ってこと。


こうすれば、retinaの端末のときだけ2倍にでかくした画像をcssで読み込ませることができるね。

ただし作業量は増えるよ。