가로 세로 비율을 유지하지 않는 배경 크기의 덮개 android chrome

Question

바탕 화면의 경우 iPad의 경우 배경에있는 이미지의 가로 세로 비율은 background-size: cover 일 때 유지되지만 내 Android 휴대 전화 (크롬)에서는 이미지가 width:100%;height:100%처럼 더 많은 것처럼 보입니다.

할 수 있습니다 see it in action here.

Here's a screenshot from my phone

// Markup 
<div class="wrapper"> 
    <div class="content"> 
... 

// Style 
html, body { 
    height: 100% 
} 

.wrapper { 
    position: relative; 
    height: 100%; 
    background-image: url(...); 
    background-size: cover; 
    ..vendor prefixes.. 
} 

Answer 1

비슷한 문제가있어서 디버깅하기가 어려웠지만 결국 그 이유를 찾을 수있었습니다 : 이미지 픽셀 크기는입니다.

TL
큰 이미지는 사용하지 마세요. 휴대 기기는 em이 좋지 않으므로 최대 2000px의 이미지를 사용하십시오.

---

거의 자세한 내용은 단순히 모바일 기기 모델과 OS에 따라, 큰 크기의 이미지를 처리 ​​할 수 ​​없습니다 넣어

. 결과가 다를 수 있습니다. 일부는 깨질 수 있으며 일부는 빈 이미지 또는이 질문과 같은 왜곡을 표시하고 때로는 404 오류를 반환 할 수도 있습니다! (거기에 있었고, 그렇게했습니다).
http://www.williammalone.com/articles/html5-javascript-ios-maximum-image-size/ :

것은 내가 여기에 SO 및 다른 웹에 많은 장소에서이 문제에 대한 정보를 발견했습니다, 좋은 글이 이미지 크기를 계산하는 좋은 도구이다.

이상적인 이미지 크기는 내 테스트에서 대부분 크기가 가장 큰 (그리고 가장 오래된) 부분을 지원하기 위해 2000px를 넘지 않아야하지만 필요에 따라 테스트 해 보는 것이 좋습니다.

Answer 2

때때로 당신의 HTML 문서에 대한 뷰포트를 정의하는 데 도움이 :

html{ 
    height:100%; 
    min-height:100%; 
    width: 100%; 
    min-width: 100%; 
} 
body{ 
    min-height:100%; 
    min-width: 100%; 
} 

에 관해서는 can i use outlined에서 안드로이드 용 크롬이 잘 처리해야합니다.

이

/* Portrait */ 
@media screen and (orientation:portrait) { 
    /* Portrait styles */ 
    .wrapper { 
     background-image: url(...); 
     background-size: auto 100%; 
    } 
} 
/* Landscape */ 
@media screen and (orientation:landscape) { 
    /* Landscape styles */ 
    .wrapper { 
     background-image: url(...); 
     background-size: 100% auto; 
    } 
} 

이 매우 간단하지만 견고하고 좋은 일을 수행합니다 휴대 전화 크롬이 cover가 예상대로 속성을 처리하지 못하기 때문에

다음은 당신이 해결 방법을 만들 수 media queries을 사용할 수 있습니다. 당신은 단지 작은 장치에 사용할 수 있도록이 CSS를 제한하려면이 도움이

@media screen and (orientation:landscape) and (max-width: 400px) { add css }

희망,

안부, 마리아처럼 미디어 쿼리를 확장 할 수 있습니다.