CSS 전체 화면 배경은 Dev-tools에서 작동하지만 실제 브라우저에서는 작동하지 않습니다.

Question

유적 앱/웹 사이트를 구축했으며이 페이지 상단에 반응이 빠른 전체 화면 배경 이미지를 표시하려고합니다 (https://www.conducate.com).

Chrome 개발자 도구와 Safari 반응 설계 모드에서 예상대로 작동하지만 페이지를 배치하여 모바일에서 볼 때 이미지 상단을 확대하는 것처럼 보입니다. dev-tools에서 예상대로 크기를 조정하지 않습니다. 결과적으로 회색 흐림 효과 만 나타납니다.

이전에이 문제가 발생 했습니까? 모든 개발자 도구에서 올바르게 작동하기 때문에 디버그하기는 어렵지만 모바일 장치에서 실제로 볼 때 디버그는 어렵습니다.

다음은 나의 모바일 (iPhone 6s, 사파리 브라우저)과 내 mac의 safari 반응 설계 모드의 스크린 샷이있는 이미지에 대한 링크입니다. 불행히도, 난으로 인해 평판의 부족에 이미지를 게시 할 수 없습니다입니다, 그래서 난 그냥 링크를 게시 할 수 있습니다 - 난 아직 여기에 초보자입니다 ... 어떤 도움이 많이 감사합니다 https://s3.eu-central-1.amazonaws.com/conducate-images/stackoverflow/example_screenshots.png

!

Answer 1

일부 특정 iOS 문제를 검색 한 후에 마침내 몇 가지 다른 예를 살펴봄으로써 문제의 해결책을 찾았습니다.

그것은 대부분의 브라우저는 CSS 라인이 아이폰 OS의 경우에는 해당되지 않습니다

.container{ 
    background: url(http://www.link-to-image.jpg) 
    ... 
} 

을 이해하는 것이 밝혀, 여기 당신은 구체적으로는, 이미지입니다이 배경에 사용되는 것을 명시해야합니다.

.container{ 
background-image: url(http://www.link-to-image.jpg) 
... 
}