[html] 개발자도구에서 미디어쿼리가 안되는 이유

반응형 작업을 하기 위해 미디어쿼리를 사용했는데,

브라우저를 바로 줄일 때는 반응형이 되는데 개발자 도구에서 해보려고하면 안되고,,,,

개발자 도구에서 스타일을 확인하면 미디어 쿼리 코드가 아예 사라지는 이유를 찾았다.

#크롬 기기툴반전환 안되는 이유..

#엣지 장치 에뮬레이션토글 안되는 이유..

 

이유는 바로 <meta> 태그에 있었다.

meta 태그란?

메타 태그는 데이터를 설명하는 데이터로, 해당 문서에 대한 정보를 담고있다.
검색엔진이나 문자인코딩 방식등을 지정하고 싶다면, 메타 태그에 내용을 명시해야한다.

메타 태그에 있는 3가지(http-equiv, name, content) 속성을 통해 meta 정보의 이름과 내용을 지정한다. 
+) 참고 블로그
1. 메타 태그 정리 
2. 메타 태그 종류 모음 

 

결론

결과적으로 안됐던 이유는 브라우저의 뷰포트(viewport) 설정을 정의하는 메타태그가 없었기 때문이었다.

<meta name="viewport" http-equiv="Content-Type" content="width=device-width, initial-scale=1.0" />

 

뷰포트는 사용자의 화면에서 웹 페이지가 어떻게 표시될지 제어하는 영역을 선언한다.

• width=device-width : 뷰포트의 너비를 사용자의 기기 화면 너비와 동일하게 설정.
• initial-scale=1.0 : 초기 확대/축소 비율을 1.0으로 설정. 즉, 페이지가 기본 배율로 표시된다.

뷰포트가 설정되어 있지 않으면, 모바일 기기에서는 뷰포트가 일반적으로 고정너비(약 980px)로 설정된다.

즉, 데스크톱 화면처럼 웹 페이지를 렌더링 하려고 하여 미디어 쿼리가 동작하지 않는것이다.