CSS가있는 iOS에서 고해상도 스프 라이트를 올바르게 사용하는 것은 무엇입니까?

Question

고해상도 (2x) 버전의 내비게이션 스프라이트를 사용하여 iPhone4 +에서 바로 스프라이트를 표시하려고 할 때 심각한 문제가 있습니다. 여기 제가 지금 사용하고있는 코드가 있습니다.

.pixelj a, .games a, .team a, .forums a { 
    width: 156px; 
    height: 35px; 
    background-image: url('/assets/blogtext2x.png'); 
    background-repeat: no-repeat; 
/* background-size: 156px 17px;*/ 
    text-indent: -9999px; 
    overflow: hidden; 
    display: block; 
    float: left; 
    } 

위의 내용에서 알 수 있듯이이 항목은 단일 단어 이미지에 모든 탐색 단어 요소가있는 탐색 용입니다. "background-size"를 사용해 보았지만, 전체 스프라이트를 너비/높이로 뭉개 버렸다. 제거하면 2 배 이미지를 보여 주지만 50 % 이미지를 올바르게 볼 수 없습니다.

내가 뭘 잘못하고 있니? 고해상도 기기를 타겟팅 할 때 사용하는 @media 검색어는 다음과 같습니다.

@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: 1.5dppx), 
    (max-device-width: 640px) { 

Answer 1

여기에 맞는 트랙이 있습니다.

는 기본적으로 CSS를 통해 스프라이트에 '망막'그래픽을 제공과 함께 여기에 프로세스는 다음과 같습니다

• 비 망막 장치에 공급하기 위해 CSS에서 등 관련 위치 /로, 일반 스프라이트를 설정,
• 이 이미지의 배경 크기를 설정하십시오.
• 미디어 쿼리를 사용하여 이미지의 @ 2x 변형을 지원하는 장치로 보내십시오.

가 염두에 두어야 할 몇 가지 주요 사항은 다음과 같습니다

• 이 background-size을 설정하는 최고의 브라우저 범위를 얻기 위해 다른 공급 업체 접두사 여러 선언을 요구 - 아래에있는 내 코드는 내가 무엇을 의미하는지에 관해 알기 위해 참조
• background-size은 그 안에있는 요소의 크기가 아닌 이미지의 비 망막 변형의 크기입니다. 따라서 일반 크기의 스프라이트 이미지가 200x400 픽셀 (고해상도 버전은 400x800 픽셀) 인 경우 사용자가 신고 한 200px 400px입니다.
• background-size 값은 <width> <height>으로 선언됩니다.
• 첫 번째 선언에 background-size을 지정해야하며 망막 미디어 쿼리 덮어 쓰기가 아닙니다.
• @2x을 사용하는 것이 일반적인 관행이되고 있지만 웹 개발에는 필수적인 것은 아니며 완전히 다른 이미지 이름을 사용할 수 있습니다.

모든 코드 나 볼 URL이 없으면 특정 질문에 도움을주기가 매우 어렵지만 여기서는 높은 수준의 예가 나와 있습니다. 이 예에서

, 난

/* the element */ 
.element{ 
    background: url(../img/site/background-image.png) 50% 50% no-repeat; 

    /* vendor-specfic declarations for background-size */ 
    -webkit-background-size: 100px 50px; 
    -moz-background-size: 100px 50px; 
    -o-background-size: 100px 50px; 
    background-size: 100px 50px; 
} 

/* for retina users */ 
@media screen and (-webkit-min-device-pixel-ratio: 2), 
screen and (max--moz-device-pixel-ratio: 2), 
screen and (min-device-pixel-ratio: 2){ 
    .element{ 
     /* we only over-write background-image here */ 
     background-image: url(../img/site/background-image@2x.png); 
    } 
} 

이 의미한다 소자의 중앙에 위치하는 폭 100 픽셀 및 50 픽셀 높이 인 배경 화상을 그 제 2 미디어 질의에 속하는 이러한 장치 는 배경 이미지의 @2x 버전을로드하고 선언 된대로 background-size 크기로 배율을 조정합니다.

이미지가 사용자가 설정 한 크기로 다시 크기가 조정되므로 스프라이트를 사용하는 경우 일반적으로 모든 요소의 background-position을 한 번만 선언해야하며 큰 망막 그래픽 치수는 두 번 나타내지 않아야합니다.

편집 :

이

은 다음과 같습니다 이유는 여기 (라인 당신의 CSS입니다 : 이제 사이트를 본 데, 난 당신이 탐색 데있어 정확하게 문제를 볼 수 있습니다) style2.css의 972 :

.pixeljam a, .games a, .team a, .forums a { 
    background: no-repeat url('/assets/blogtext2x.png'); 
} 

당신은 그 background-image로 변경하고 no-repeat을 제거하는 경우 그러면 작동 할 것입니다 (그렇지 않으면 background은 이전 배경 위치를 재설정합니다).

.pixeljam a, .games a, .team a, .forums a { 
    background-image: url('/assets/blogtext2x.png'); 
}