망막 디스플레이에 최적화 된 스프라이트

Question

나는 모바일 장치 및 아이폰에서 CSS 스프라이트에 대해 읽었으므로 반응 형 웹 사이트를 구축하고 있습니다. 나는 this article을 발견했다, 나는 그것이 바른 tecnique 다라고 생각한다. 그러나 설명은 더 좋을 수 있었다. 나는이 함께 결국 :

http://jsfiddle.net/H9FcH/

누군가가 아이폰에 확인 보이는 경우 말씀해 주시겠습니까? 그 50 %가 확실하지 않습니다. 또한 누구에게도 더 좋은 기사가 있습니까?

Answer 1

가 Retine 지원 장치에 지정 background-size 속성은 비 망막 스프라이트의 크기, 즉 절반 폭 망막 스프라이트의 절반 높이를 포함한다. 스프라이트 내의 단일 아이콘의 크기가 아닌 전체 스프라이트의 크기 여야합니다.

업데이트 바이올린 :http://jsfiddle.net/jhogervorst/qr5fs/2/

스크린 샷 (망막) :http://i.stack.imgur.com/sIDnE.png

CSS :

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
     only screen and (min--moz-device-pixel-ratio: 1.5), 
     only screen and (min-resolution: 240dpi) { 
     .action { 
      background-image: url(http://dl.dropbox.com/u/13823768/masonry/img/test-sprite2x.png); 
      -moz-background-size: 153px 64px; 
      -o-background-size: 153px 64px; 
      -webkit-background-size: 153px 64px; 
      background-size: 153px 64px; 
     } 
}