태그 보관물: Retina Display

레티나, HD 디스플레이용 배경이미지 설정

우선 결과물 부터 보도록 하죠. 아이폰 5나 갤럭시S3 등 HD급 화면을 가진 단말기에서 확인하면, 다음 2개의 DIV중 아래쪽의 배경 패턴이 더 깨끗하게 나오는 반면, 위쪽은 흐릿하게 보이는 것을 확인해 볼 수 있습니다. 단, 일반 디스플레이의 단말기나 PC에서 보면 차이가 없습니다.

div{ background:url(pattern.gif); }
@media (-webkit-min-device-pixel-ratio:2){
div{ background-image:url(pattern@2x.gif); background-size:4px 4px; }
}

실제 이런 모습으로 보여집니다.
galaxy_ipad2
HD 해상도에 맞춰서 이미지를 2배로 늘려서 표시 하다보니, 이미지가 흐릿하게 보이는 현상이 생기게 되는 것입니다. 이를 방지하기 위해서 미디어 쿼리를 사용해, HD 해상도에는 미리 준비한 HD용 이미지를 사용하도록 처리해 주어야 합니다.

레티나, HD 디스플레이용 배경이미지 설정 더보기