[Next.js] 미디어쿼리가 모바일 배포환경에서만 적용되지 않습니다ㅠㅠ

Question

현재 Next.js를 이용해서 프로젝트를 진행하고 있는 대학생입니다!
프론트엔드를 개발하면서 반응형 웹을 계획하고 미디어쿼리를 이용해 반응형 레이아웃을 테스트하는데 데스크탑 개발환경 및 배포(vercel)환경에서는 미디어쿼리가 잘 작동하지만 모바일로 배포환경에 접속하면 미디어쿼리가 적용되지 않습니다.

해결을 위해 시도한 방법
1. 일반 css파일과 css_module파일이 특정 상황에서 충동을 일으킬 수 있다는 정보를 토대로 모든 스타일 파일을 css_module로 통일했습니다.
2. metadata에 viewport 구문이 빠져있을 수 있다는 정보를 토대로 next/Head를 이용해서 viewport를 따로 명시했습니다.

위 방법들을 모두 시도했지만 여전히 데스트톱에서만 미디어쿼리가 작동하고 모바일 배포환경에서는 먹통입니다.
선배님들의 도움이 필요합니다ㅜㅜ

김하림 · Accepted Answer

질문자분이 알려주신 정보만으로는 확인이 어렵습니다. 아래와 같은 방법으로 직접 디버깅하는 방법을 소개드릴게요.

### Safari의 경우:
XCode 아이폰 시뮬레이터로 해당 사이트에 접근 후, Safari Technology Preview버전으로 (없으면 설치하셔야 해요) 시뮬레이터 기기에 개발자 도구를 열어서 미디어 쿼리가 적용된 CSS가 제대로 로드되었는지 확인해보세요.

### 안드로이드의 경우:
별도 시뮬레이터 설치 없이 USB 연결해서 크롬으로도 디버깅해볼 수 있습니다.

### 체크 리스트
- 네트워크 탭에서 로드한 CSS를 확인해보고, media query가 제대로 들어갔는지 확인해보세요.
- Element 탭에서 미디어 쿼리가 적용된 요소를 찍어보고, PC에서 확인한 스타일링과 어떻게 다른 지 비교해보세요.

### 그 외 확인해볼 것
1. 미디어 쿼리를 제대로 명시하셨나요?
- 미디어 쿼리 문법 자체가 잘못 작성되었는지 한 번 더 확인해보세요.
- 미디어 쿼리 특정 문법(Range Syntax)의 경우 하위 버전(ex: Safari < 16)에서 동작하지 않을 수 있습니다. 최신 문법을 썼다면 브라우저 버전과 Can I use에서 호환 브라우저를 확인해보세요.

2. 모바일 브라우저에서 배포 전의 캐시가 남아있을수도 있습니다. 캐시를 삭제하고 시도해보셨나요?

3. 특정 모바일 기기에서만 재현되는 이슈인가요?
- Android / Safari 등 특정 기기에서만 재현되는 이슈일 수 있습니다.

김태우 · Answer

혹시 Next.js 13버전 이상이신가요? 그렇다면 더이상 Head 태그를 쓰지 않고 다른 방식으로 head 요소들을 작성합니다.
https://nextjs.org/docs/app/api-reference/functions/generate-viewport
참고하세용