Blogの公式キャラクター「パンD」です。RetinaディスプレイのデバイスでWebサイトを見ると、なんか画像がぼやけてることありませんか?そんな時の対処法をご紹介します。javascriptです。画面解像度が高いことが特徴です。4が640px×960pxとなっています。画面解像度が2倍に上がっているのですね。上記の通り画面解像度が2倍になったことにより、普通のディスプレイで等倍で表示していた画像が、Retinaディスプレイだと縦横2倍に引き伸ばされた状態で表示されているということになります。この現象の対応策はいろいろあるのですが、その中でKoToRiがいいなと思った「Retina.js」というjavascriptを使った対応方法を紹介しようと思います。「Retina.js」の使い方Retinaディスプレイ用の画像を用意するRetina.jsは読み込むだけでRetinaディスプレイのデバイスでアクセスされた時に、別で用意してあるRetinaディスプレイ用の画像を読み込んでくれます。Retinaディスプレイ用の画像として本来の大きさの2倍の大きさの画像を用意します。その際、ファイル名を「元画像のファイル名@2x.png」のように拡張子の前に「@2x」という文字列を付けます。ファイル名が「kotori.png」の場合、Retinaディスプレイ用の画像は「kotori@2x.png」となります。zip」ボタンからファイルをダウンロードします。ダウンロードしたzipを解凍してください!「Retina.js」の読み込み解凍したフォルダ内の「js」フォルダの中にある「retina-1.1.0.min.js」を自分のフォルダにコピーしてHTMLに読み込みます。公式サイトには</body>の直ぐ上に読み込みのタグを入れてくださいと書いてあるのでそうしましょう。src="/scripts/retina.js"></script>パスは適宜変更してください。これでRetinaディスプレイのデバイスでアクセスされた時に「@2x」が付いたRetinaディスプレイ用の画像を表示してくれます。/>基本的な使用方法は以上になります。上の説明でRetina.jsがimgタグの画像に対応しているのはお分かりいただけたと思います。背景画像もRetinaディスプレイに対応させたい場合はどうしたらいいの?という事になりますね。Queryで対応可能です。説明するよりコード見たら一発だと思うのでどうぞ!!!「#logo」の背景画像をRetinaディスプレイのデバイスでアクセスされた時に「@2x」が付いた画像に差し替えるコードです。「Retina.js」は「LESS」でも利用できるようになってます!!「LESS」とは何ぞやって人は下記を参考にしてください。ASCII.jp:CSSの記述が3倍速くなる「LESS」の使い方Retina.jsをLESSで使用ダウンロードして解凍したRetina.jsのフォルダ内の「less」フォルダの中に「retina-1.1.0.less」というファイルがあるのでそのコードを自分のLESSスタイルシートに追加するか、自分のフォルダにコピーしてHTMLに読み込んでください。すると「.at2x()」の関数が使用できるようになります。「#logo」の背景をRetinaディスプレイに対応させたい場合はスタイルシートに下記コードを追加します。100px);}上のコードはコンパイル後こうなります。}}まとめRetinaディスプレイは画質がすごく綺麗になってすごくいいと思う!!でもね、対応がめんどくさいよね笑どんどん新しい便利な技術が生まるのは凄くいいこと。それにどんどん対応していかなきゃいけないのがすごく面倒です笑でもこれがWebという世界なんですよね。これからも頑張ります。Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。@KoToRi_blog基本フォロー返します。RSSを登録するRSSはこちらから。Feedly使ってる人はこちらから。マルファン症候群を本物のマルファン症候群患者が徹底解説!マルファン症候群ブログはじめます。私はマルファン症候群です。