일부지도 타일이 모바일 레이아웃에서 렌더링되지 않습니다.

Question

V3 map api를 사용하여 페이지에 렌더링 된 Google지도가 있습니다. 모든 것이 효과적이지만, 어떤 이유로 초기보기의지도 타일이 모바일보기에서 렌더링되지 않습니다. 그것은 580px 중단 점에서 휴식지만 문제가 발생할 것 같은 내 CSS에서 아무것도 찾을 수 없습니다. 고정 된 크기에서지도 컨테이너의 비율로 이동하지만 고정 된 크기로 항상 시도했지만 문제가 해결되지 않았습니다. 현재 페이지는 https://www.edenrift.com/Taste입니다.

지도를 이동하여 초기보기 왼쪽의 영역을 보면 타일이 처음보기의 타일이 아닌 렌더링 된 것을 볼 수 있습니다. 또한 줌 버튼이 동일한 중단 점에서 엉망이되는 방법에 유의하십시오.

Answer 1

여기에서 질문 할 때 문제를 재현하는 데 필요한 모든 코드를 으로 제공해야합니다. 코드가 변경되거나 URL이 더 이상 유효하지 않으면 다른 독자에게 유용하지 않으므로 실제 코드에 대한 링크가 아닙니다.

@media screen and (max-width: 580px) img { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    float: none; 
    max-width: 100% !important; 
    height: auto; 
} 

그리고 더 구체적으로 max-width: 100% !important;

그것은 심지어지도 컨트롤이 엉망으로는 CSS 문제입니다 분명하다 : 고 말했다

는 다음과 같은 규칙이 문제를 일으키는 것입니다.