CSS 미디어 쿼리가 휴대 기기에서는 작동하지 않지만 Google 크롬 장치 에뮬레이터에서는 그렇다고하는 이유는 무엇입니까?

Question

제목에서와 같이 Google 크롬에서 에뮬레이터 장치에서 미디어 쿼리가 작동하는 이유와 실제 모바일 장치에서 작동하지 않는 이유를 알 수 없습니다.

HTML을 메타 태그

<meta name="viewport" content="width=max-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 

CSS는 :

@media screen and (min-device-width:640px) and (max-device-width:767px){...} 

사실

I 모바일 장치의 화면 해상도 640/768/850/1024에서 최소 및 최대 해상도를 설정 한하지만, 오류 일 수 있습니다. 원인은 .... 아직 이해할 수 없습니다.

Answer 1

메타 뷰포트에서 장치 너비를 적용해야합니다.

,210

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 

Answer 2

CSS의이 같은해야 다음 체크 :

@media screen and (min-width:640px) and (max-width:767px){...}