모바일 디버깅보기에서 Chrome에서 미디어 쿼리가 읽히지 않습니다.

Question

Chrome에서 매우 이상한 동작이 발생합니다. 모바일 디버깅보기에있을 때 특정 크기의 미디어 쿼리를 선택하지 않습니다.

모바일보기에서 다음 작품 예를 들어

:

@media screen and (max-width: 980px) { 
    #cliff { 
     background-color: red; } 
    } 

을하지만이

@media screen and (max-width: 979px) { 
    #cliff { 
     background-color: red; } 
    } 

당신은 차이가 하나의 픽셀입니다 볼 수 있습니다 작동하지 않습니다. 그런 다음 모바일 디버깅보기에서 나오고 화면 크기를 변경하면 작동합니다. 아무도 조언을하거나, 어떤 일이 일어나고 있는지 알 수 있습니까?

Answer 1

헤더에이 항목이 있습니까?

<meta name="viewport" content="width=device-width, initial-scale=1"> 

또한 형식을 변경하면 도움이됩니다. 이 작품은 나를 위해 :

@media (max-width:980px){ 
    //Styles 
}