解像度ごとに異なるCSSの記述方法について

同じMacPCだけど、Retinaとそうでないディスプレイで、画像が表示される・されないの違いが出ました。その原因が半日かけてわかったので書いておきます。


僕は東京、相方は大阪にいます。相方が開発をしていて、僕は随時共有してもらいながら、テストを実施、テスト結果をフィードバックという形で今進めています。そこでこんなやりとりが発生しました。

僕:(画面上にアイコンが表示されないと伝える)
相方:俺のは表示されているよ。
僕:うそ・・。(キャッシュを消してみる)キャッシュを消してもダメだった。キャッシュ消して試してみて。
相方:キャッシュ消したけど変わらないよ。
僕:・・・。ちょっといろいろ調べてみる。

ちなみにSlackでやりとりしてます。

  • 僕と相方でブラウザのバージョンは同じ
  • 僕のiPhone6Plusでは表示される
  • 僕のPCだとsafari、FireFoxも表示されない
  • ChromeBookで試したけどダメ
  • Googleのアカウント切り替えたけどダメ


  • Chromeのデベロッパーツールでソースを調べて見る。どうやら、ここらへんの記述が反映されていない模様。

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and ( min–moz-device-pixel-ratio: 2),
    only screen and ( -o-min-device-pixel-ratio: 2/1),
    only screen and ( min-device-pixel-ratio: 2),
    only screen and ( min-resolution: 192dpi),
    only screen and ( min-resolution: 2dppx){
    アイコンが表示されるための記述
    }

    webkitはsafariとChrome向けの記述、mozはFireFox、oはOpera。minは〜以上であれば反映される。例えば、device-pixel-ratio:2は、device-pixel-ratioが2以上であればアイコンが表示されるための記述が反映される。ここまでは、なんとなく調べずとも分かりました。少しだけ、自分に経験が身についていることを実感。

    さて、device-pixel-ratioもresolutionも全然分からない。でもGoogleで調べれば一発でした。素晴らしい時代です。どうやら、Retinaディスプレイはdevice-pixel-ratioが2とのこと。ここでピンと来ました。相方は最近新しいMacを買った、Retinaなはず。僕のは少し古い。そういうことか・・。画面サイズに応じて、CSSの反映させる・させないを分ける記述は知っていましたが、まさか解像度?に応じても書き分ける時代になっているとは。

    じゃーなんで、こんな記述をしたの?自分で書いたなら、最初から意味わかってるでしょということなんですが、実は今回はテンプレートを使っているんですね。だから、CSSとか全部理解しているわけでもなく、おそらく低解像度の記述を消しちゃったのだと思います。


    最後に、デバイスごとの情報とお勧めサイトを紹介します。

    デバイス device-pixel-ratio dpi(=ppi)
    MacBookAir(Retinaではない) 1 96
    MacBookProRetina 2 220
    iPhone6Plus 3 調べていない
    iPhone6 2 調べていない
    iPhone5s 2 調べていない
    iPhone4s 2 調べていない


  • device-pixel-ratioのわかりやすい解説記事
  • 開くだけで自分の端末のことが分かるサイト