타블렛 및 휴대 전화에는 배경 이미지가 표시되지 않습니다.

Question

배경 이미지는 PC 및 시뮬레이터 (태블릿 및 휴대 전화)에서 완벽하게 표시되지만 실제 휴대 전화/태블릿에는 표시되지 않습니다.

div#photo_break { 
    @include viewport-unit(height, 28vw); 
    background-image: url('<img>'); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
    -webkit-background-size: 100% auto; 
    -moz-background-size: 100% auto; 
    -o-background-size: 100% auto; 
    background-position: center top; 
    background-attachment: fixed; 
    z-index: 99999; 
} 

website

이 그림에서 볼 수 있듯이 코드는 Chromes simulator에 사진이 표시됩니다.

이미지의 크기는 정말 큰 아니거나입니까?

Answer 1

mobile 및 tablet browsers는 background-attachment: fixed을 지원하지 않습니다.

이것을 변경하면 문제가 해결됩니다.

Answer 2

멋진 사이트. : D 당신의 문제를 해결하려고 노력합시다.

해당 콘텐츠를 차단할 수 있으므로 미디어 쿼리 내부에 해당 CSS 코드가 없는지 확인하십시오.

휴대 전화와 동일한 CSS (예 : @media (min-width: 481px) { })가 포함 된 새로운 미디어 쿼리를 추가하려고 할 수도 있습니다.

사이트를 다시로드하기 전에 모바일 브라우저의 캐시를 청소하십시오.

Answer 3

배경 이미지의 너비가 12,000 픽셀입니다. 로드하는 데 시간이 오래 걸립니다. 헤더 안쪽에 부모 div의 배경을 검은 색으로 표시 한 다음 해당 컨테이너 내의 요소 배경으로 사람의 이미지를 넣는 것이 좋습니다. 모바일 사용자 데이터를 저장하십시오!