모바일 자판이 열린 상태에서 페이지를 이동하는 경우에 viewport가 깨지는 문제 해결

회사 리팩토링을 진행하면서 웃긴 상황이 발생됐다

 

안드로이드 폰에서

그냥 직접 url을 접근하면 문제가 따로 안생기는데

검색을 통해서 url에 접근하는 경우에

이상하게 상단에 250px 만큼 흰색 화면이 생기면서 페이지에 접근이 됐다

신기방기 ㅋㅋ

 

그래서 이 250px가 도대체 어디서 왔는가? 를 찾아보니

모바일 자판기 인 것 같은..?

 

그래서 결론적으로 문제는

이동한 페이지에서 뷰포트가 모바일 자판기를 포함한 상태로 인식하다 보니까 css가 박살나서 보이는 상황인것이다

 

프론트개발자 분이랑 같이 삽질하다가 찾았다

https://developer.chrome.com/blog/viewport-resize-behavior?hl=ko

Android용 Chrome에 적용될 표시 영역 크기 조절 동작 변경사항에 대비하기  |  Blog  |  Chrome for Devel

 

여기서 interactive-widget 내용을 검색하면 된다

 

meta에 interactive-widget를 추가하고 나니까 잘된다