@media 쿼리 인식 안됨
데스크탑 브라우저 사이즈로 열심히 만들었던 웹페이지가 모바일 버전에서는 심각할정도로 크기가 작아지거나 화면 비율이 맞지 않게 되어서 검색 끝에 @media 쿼리를 사용하여 최대, 최소 width를 인식하는 기능을 찾았습니다.
그런데 실제로는 전혀 동작하지가 않았습니다.
며칠을 허비한 것이 무색할 정도로 간단하게, 챗GPT에게 물어보니 몇 번은 media 쿼리문만 알려주다가 계속 안된다고 하니 다음과 같은 설명을 해주었습니다.
ChatGPT의 답변
문제를 확인하려면, 웹 페이지의 <head>에 다음과 같이 viewport 메타 태그가 있는지 확인해주세요.
<meta name="viewport" content="width=device-width, initial-scale=1">
이 메타 태그는 웹 페이지가 모바일 기기에서 올바르게 렌더링되도록 하는데 필요합니다. 뷰포트 설정이 없으면 기기의 기본 뷰포트 너비로 렌더링되어 미디어 쿼리가 예상대로 작동하지 않을 수 있습니다.
뷰포트 메타 태그를 추가한 후에도 문제가 해결되지 않는다면, 사용 중인 브라우저의 개발자 도구를 이용해 CSS를 확인해보세요. 개발자 도구를 사용하면 현재 적용된 CSS와 미디어 쿼리를 검사할 수 있습니다. 이를 통해 문제를 파악하고 해결할 수 있습니다.
개발자 도구를 사용하는 방법은 브라우저마다 다르지만, 대부분의 브라우저에서 F12 키를 누르거나 우측 상단의 메뉴 버튼을 클릭하여 "개발자 도구"를 선택하면 열립니다. 또한 Ctrl+Shift+I(Windows) 또는 Cmd+Opt+I(Mac) 단축키를 사용하여 개발자 도구를 열 수도 있습니다.
문제 해결
저의 경우 "viewport" 메타 태그를 적용하는 것만으로 CSS를 구분할 필요 없이 대부분의 문제가 해결되었습니다.
반응형 웹페이지 디자인을 하실 때 화면 크기별로 너무 큰 차이가 나거나 위의 문제처럼 미디어 쿼리가 인식되지 않는다면 "viewport" 메타 태그 적용을 참고해보시기 바랍니다.
'개발, 코딩 > 웹사이트, 앱 개발' 카테고리의 다른 글
| 앱스토어 출시 후 정책 위반으로 앱 삭제 및 광고비 증발 (5) | 2023.08.16 |
|---|---|
| 구글 플레이 스토어 출시를 위한 AAB (Android App Bundle) 빌드 방법 (5) | 2023.05.15 |
| 비로그인 무료 ChatGPT 서비스 - FreeGPT (맞춤형 사전 프롬프팅) (0) | 2023.05.14 |
| Expo와 React-native-webview를 사용한 웹뷰앱 만들기 (0) | 2023.05.08 |
| ChatGPT를 이용한 인공지능 타로술사 타로봇 개발기 (Feat. 조코딩님 강의) (1) | 2023.05.06 |
