Retina 디스플레이에서 이미지가 흐려지는 문제 대응법~

아래와 같은 3가지 방법이 있다.

1. 이미지를 실제로 표시하는 크기의 4배의 크기( 높이2배, 넓이2배 )로 작성.

    그리고 img 요소의 width 및 height 에는 표시 크기를 지정.

   예>  <img src="large(640x480px).jpg" width="320" height="240">

2. image-set 함수에 따른 대응 방법 

ios6 이후 탑재된 Mobile Safari 에 내장된 image-set 함수 사용.

image-set 은 디바이스 픽셀 비율등에 따라서 이미지를 분배하는 함수.

selector{

   background: -webkit-image-set( url( 1x.png ) 1x, url( 2x.png ) 2x );

   background: #777;

}

3. device-pixel-ratio 를 사용한 대응 방법

/*iPhone3GS 이전, 저해상도 Android단말, devicePixelRatio 비대응 브라우저*/

selector{

    /*통상적인 이미지 크기*/

   background: url( low.png );

   height: 100px;

   width:100px;

}

/* Android단말 */

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

            only screen and (min-device-pixel-ratio:1.5){

       selector{

            background-size:100px 100px;

           /* webkit 대응 */

          -webkit-background-size:100px 100px;

         /* 1.5배 크기 이미지 */

         background:url( middle.png );

      }

}

/* iPhone4 또는 4s, 고해상도 Android단말 */

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

            only screen and (min-device-pixel-ratio: 2){

     selector{

        background-size:100px 100px;

      /* webkit 대응*/

      -webkit-background-size:100px 100px;

      /*2배 크기 이미지*/

      background: url( high.png );

    }

}