whats-app 클론을 만들다가 겪은 이슈이다.
데스크탑 모드에선 전혀 문제가 없었다. 문제는 모바일 모드에서 발생하였다.
모바일에서 테스트하다가 어느순간 화면이 zoom out되면서 모든 요소가 작아졌고 보이지 말아야 할(화면 바깥에 숨겨져야할) toast searchMessages 컴포넌트가 한 눈에 보이게 된것이다.
결론부터 말하자면 header에 viewport관련된 meta태그를 명시해주면 된다.
모바일 디바이스에 모든 것이 세팅되도록 말이다 아래와 같이 메타태그를 설정하니 zoom out되던것이 해결되면서 데스크톱과 같이 작동하였다.
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=0"
/>
</head>content를 차근차근 살펴보자
width=device-width
This means, we are telling to the browser “my website adapts to your device width”.
==> 기기 크기에 맞게 width가 맞춰짐
initial-scale
This defines the scale of the website, This parameter sets the initial zoom level, which means 1 CSS pixel is equal to 1 viewport pixel. This parameter help when you're changing orientation, or preventing default zooming. Without this parameter, responsive site won't work.
==> 화면크기에 맞게 픽셀이 1대1 대응이 되도록
maximum-scale
Maximum-scale defines the maximum zoom. When you access the website, top priority is maximum-scale=1, and it won’t allow the user to zoom.
==> 최대한 확대되는 정도
user-scalable
User-scalable assigned to 1.0 means the website is allowing the user to zoom in or zoom out.
But if you assign it to user-scalable=no, it means the website is not allowing the user to zoom in or zoom out.
==> 유저가 줌을 허용할지 안할지 세팅
