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

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

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

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

基本

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

CSS3 Meia Queries

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

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

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

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

background-sizeとの併用

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

CSS:
  1. .sprite{
  2.    background-image:url('sprite.png');
  3. }
  4. @media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) {
  5.    .sprite{
  6.        -webkit-background-size:500px 300px;
  7.        background-image:url('sprite4.png');
  8.    }
  9. }

JavaScript

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

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

サンプル

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

HTML:
  1. <img src="sample.png" width="500" height="300" alt="" id="retina" />
JavaScript:
  1. if(window.devicePixelRatio> 1){
  2. var img = document.getElementById('retina');
  3. img.src = 'sample4.png';
  4. }
  5.  
  6. //jQuery
  7. if(window.devicePixelRatio> 1){
  8. $('#retina').attr('src', 'sample4.png');
  9. }

Sass

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

before:

CSS:
  1. @mixin Image( $top:0, $left:0, $repeat:no-repeat){
  2.  
  3.    background-repeat:$repeat;
  4.    background-position: $top $left;
  5.    background-image:url('sprite.png');
  6.  
  7.   @media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) {
  8.    -webkit-background-size:500px 300px;
  9.    background-image:url('sprite4.png');
  10.   }
  11.  
  12. };
  13.  
  14. .sprite {
  15.   @include spriteImage();
  16. }
  17. .hoge{
  18.  @include spriteImage(-50px,-100px);
  19. }

after:

CSS:
  1. .sprite {
  2.   background-repeat: no-repeat;
  3.   background-position: 0 0;
  4.   background-image: url("sprite.png");
  5. }
  6.  
  7. @media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) {
  8.   .sprite {
  9.     -webkit-background-size: 500px 300px;
  10.     background-image: url("sprite4.png");
  11.   }
  12. }
  13.  
  14. .hoge{
  15.   background-repeat: no-repeat;
  16.   background-position: -50px -150px;
  17.   background-image: url("sprite.png");
  18. }
  19. @media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) {
  20.   .hoge {
  21.     -webkit-background-size: 500px 300px;
  22.     background-image: url("sprite4.png");
  23.   }
  24. }

Zoom

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

CSS:
  1. body{
  2.   zoom:0.5;
  3. }

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

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://tenderfeel.xsrv.jp/css/1180/trackback/
Listed below are links to weblogs that reference
[css,js] Retinaディスプレイ対策 from WebTecNote

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

最近の投稿
最近の修正
Tag Cloud
おすすめサーバー・他
メタ情報

Return to page top