[css,js] Retinaディスプレイ対策

スマートフォンのRetinaディスプレイだとPCでくっきり見えてる画像がぼやけてしまう件。

500px × 300pxの画像をRetinaディスプレイでくっきりさせたいなら
1000px × 600pxの画像を作成してサイズを50%に指定すれば良い。
その方法を以下に列挙する。

基本

Retinaディスプレイはdevice-pixel-ratioという値が1.5ないし2なので
CSSなりJSなりでその値を判別して振り分ける

CSS3 Meia Queries

Androidで未対応機種があるため、上書きで使う方が無難。

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) {
}

スタイルシートの分離をするならこっち。

<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 1.5)" type="text/css" href="android.css" />
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

background-sizeとの併用

２倍サイズで作った画像を等倍と同じサイズに指定してメディアクエリで上書きする。

.sprite{
   background-image:url('sprite.png');
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) {
   .sprite{
       -webkit-background-size:500px 300px;
       background-image:url('sprite4.png');
   }
}

JavaScript

window.devicePixelRatioに値が入っている。
PCや古いスマホは１、iPhone4は2、Androidは1.5～2と機種によりまちまち。

if(window.devicePixelRatio > 1){
//１より大きければRetinaディスプレイである
}

サンプル

Retinaディスプレイだったらsrcを変更するサンプル。
imgタグでサイズ指定しておけば勝手に縮小される。

<img src="sample.png" width="500" height="300" alt="" id="retina" />

if(window.devicePixelRatio > 1){
var img = document.getElementById('retina');
img.src = 'sample4.png';
}

//jQuery
if(window.devicePixelRatio > 1){
$('#retina').attr('src', 'sample4.png');
}

Sass

Sassで@media使うとコンパイル時に分離してくれるので便利
以下はCSS Sprite + @mixin + @mediaのサンプル。

before:

@mixin Image( $top:0, $left:0, $repeat:no-repeat){

   background-repeat:$repeat;
   background-position: $top $left;
   background-image:url('sprite.png');

  @media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) {
   -webkit-background-size:500px 300px;
   background-image:url('sprite4.png');
  }

};

.sprite {
  @include spriteImage();
}
.hoge{
 @include spriteImage(-50px,-100px);
}

after:

.sprite {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url("sprite.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) {
  .sprite {
    -webkit-background-size: 500px 300px;
    background-image: url("sprite4.png");
  }
}

.hoge{
  background-repeat: no-repeat;
  background-position: -50px -150px;
  background-image: url("sprite.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) {
  .hoge {
    -webkit-background-size: 500px 300px;
    background-image: url("sprite4.png");
  }
}

Zoom

全てを2倍サイズで作ってbodyを縮小するという荒業もあります。

body{
  zoom:0.5;
}

この荒業はJS側の値も全部2倍にしないといけないので
ライブラリを多用していると逆に面倒くさい。