레티나 스크린 전용 media query

The ultimate “target retina screens” media query

http://mir.aculo.us/2012/11/28/the-ultimate-target-retina-screens-media-query/

아이폰, 아이패드 등 레티나 디스플레이가 사용되고 있는 기기에 적용되는 media query 입니다.

@media (min--moz-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (-webkit-min-device-pixel-ratio: 1.5),
       (min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi),
       (min-resolution: 1.5dppx) {
 
/* Retina rules! */
 
}

글쓴이가 여러 기기에서 테스트해본 결과 위와 같은 media query를 사용하면 레티나 스크린을 가진 기기에 적용되었다고 합니다. 레티나 디스플레이는 devixe-pixel-ratio 1.5 이상, resolution 144dpi 이상 또는 1.5dppx 이상을 가지고 있는 것 같습니다.

  • 김진태

    오 좋은 자료입니다. 감사합니다.

    • codefactory

      감사합니다..^^