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 );
}
}