background-size : 커버는 망막 디스플레이에 픽셀 화되어 있습니다.

Question

웹 사이트는 here입니다. iPad 3 또는 iPhone 4에서 '정보'또는 '연락처'섹션을 체크 아웃하면 배경이 모두 미친 것처럼 보입니다.

나는 으로 설정 했으므로 사용자가 크기를 조정하면 적절하게 조정되지만 iPad 또는 iPhone에서는 끔찍한 모양이됩니다.

기기를 수정하는 방법에 대한 도움말이나 정보 @media only screen and (min-device-pixel-ratio: 2)?

감사합니다.

Answer 1

background-attachment:fixed을 사용하고 있기 때문에 이유가 무엇이든간에 iOS에서 background-size: cover과 함께 사용하면이 문제가 발생합니다. (나는이 동일한 버그를 http://jag.is에두고 오늘 해결했다).

그래서 당신이 문제가 해결되어야 다음을 추가하는 경우 : 그것이 내가 내 솔루션을 발견 background-size

Here's the article의 cover 속성을 인식하지 못하기 때문에

/* for background-size:cover replacement on iOS devices */ 
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) { 
    header { 
     -webkit-background-size: auto 150%; 
     background-attachment: scroll; 
    } 
} 
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) { 

    header { 
     -webkit-background-size: 150% auto; 
     background-attachment: scroll; 
    } 
} 

-webkit-background-size 속성뿐만 아니라 iOS 용입니다 에서.

멋진 사이트 디자인 BTW.

Answer 2

IOS 용 고해상도 이미지를 만들 때 이미 수행중인 것으로 보이는 고해상도 미디어 쿼리를 사용해야합니다. 또한 이미지가 두 배 커야하고 높은 망막의 경우 50 %로 축소되어야합니다.

@media all and (-webkit-min-device-pixel-ratio : 1.5) { 
      #header { background: url(headerRatio2.png); background-size: 50%; } 
     } 

이 방법이 효과가 있습니다. 적절한 메타 태그가 있는지 확인한 다음 코드를 다시 확인하십시오.