이슈노트📝 모바일 화면에서 반응형 적용이 안 되는 문제

버튼 클릭 시 새창으로 이동하는 화면이 있었다.

새 창에서 열린 페이지에선 반응형이 적용이 안되는 문제가 발생!

원래 화면보다 작게 보여서 사용자들에게 불편함이 생겼다.

혼자 알아내보려고 노력해봤지만..! 도무지 원인을 모르겠어서 결국 대리님께 조언을 구했다.

원인은 <meta>태그 때문이었다. 정확히는 viewport 메타태그가 없어서 생긴 문제였다.

새탭을 열면서 불러오는 과정에서 head에 있는 meta태그 전체를 생략하고 불러오기때문에 발생했다.

이전에도 해당 태그에 대해 정리를 한 적이 있다.

그저 이런 속성이 있구나 하고 가볍게 넘어갔을 뿐 정확한 용도를 이해 하지못했다.

이번 기회에 제대로 짚고 넘어갈 수 있어서 다행이다!

▼ meta태그에 대한 정리된 포스팅

📙 Meta 태그란? - meta data 요소를 나타낸다. - , , , 로 나타낼 수 없을 때 를 이용한다. - 웹 페이지의 요약본이다. - 반드시 body 앞에 위치해야한다. 📌 meta data란? - 데이터에 관한 구조화된 데이터

yurim99.tistory.com

▼veiwport에 대해 알아보기

윈도우 창 크기 알아내기

1. 윈도우 창 개념 가장 먼저 window가 무엇인지 알아보자. 윈도우는 viewport와 상단바를 포함한 브라우저 창 전체를 말한다. 반응형 작업시 media qurey로 작업하고 그 외 특수한 경우에 사용하는 것을

yurim99.tistory.com

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

위에 코드를 추가하니 아래 사진처럼 잘 나온다.

이슈노트📝 자동 다크모드 해제 (0)	2024.04.08
이슈노트📝 ios 정책으로 인한 비디오 전체화면 해제 (0)	2024.04.05

Study With me