Plains フリーランス フロントエンドエンジニア

備忘録 2012.07.03

Retinaディスプレイへの簡単な対応例

RetinaディスレイにWEBサイトを対応させる方法をググッてみると、いろいろとややこしい対応が検討されているみたいですが、手っ取り早くRetina向けの高精細画像を差し替える方法を検討してみました。

●Javascriptによる対応

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  if( window.devicepixelRatio > 1 ){
    var elm = $('img');
    var src,postfix = '@2x';
    for(i=0; i<elm.length; i++){
      src = elm.eq(i).attr('src');
      src = src.substr(0, src.lastIndexOf('.'))
      + postfix
      + src.substring(src.lastIndexOf('.'));
      elm.eq(i).attr('src', src)
    }
  }
});
</script>

window.devicepixelRatioはディスプレイの解像度を識別するためのプロパティで高精細ディスプレイの場合は2を返すようです。ディスプレイが高精細であると判断すると、ページ内の全ての画像名に対して’@2x’を付け加え、予め用意しておいたRetina向けの画像に置き換えます。

●CSS(背景画像を使用する場合)の対応

#foo{
  background:url(img/samp01.jpg) no-repeat;
  background-size:200px 150px;
}

@media only screen and (-webkit-min-device-pixel-ratio:2){
  #foo{
    background-image:url(img/samp01@2x.jpg);
  }
}

背景画像の場合はbackground-sizeで表示サイズを規定しておかないと、差し替えた画像によって背景の大きさが変わってしまいます。’-webkit-min-device-pixel-ratio’は高精細ディスプレイを判別するプロパティですが、現状ではRetinaに対応しているブラウザがSafariのみということで、webkitのベンダープレフィックスを付加しています。

とりあえずはこんな感じで簡単に対応してみるのもありかと。
欠点は、最初に通常の画像を読み込むため、二重に画像をダウンロードするということ。モバイル端末であれば、余計なパケット量が発生してしまい、各通信キャリアのパケット制限への到達を早める可能性があるということ。

Go to Top