모바일 웹 작업을 하면서 발생한 이슈와 해결책을 정리한다.
모바일 화면으로 개발할 때 dimensions(면적)을 responsive로 해놓고 작업하는데,
화면 크기를 늘렸다 줄였다를 반복하자 화면이 계속해서 확대되는 이슈가 있었다..
(실제 사용자가 두 손가락으로 확대한다거나 더블탭을 하는 등의 행위와 유사할 것 같은데,)
css의 문제인 줄 알고 이것 저것 만져보았지만 해결이 되지 않았다.
구글링을 통해 찾아보니, 생각보다 이런 문제로 애를 먹는 사람들이 많았다...
해결방법은 viewport 속성 값을 설정해주는 것이다.
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" /> initial-scale=1.0: 조작하지 않았을 때 초기에 보여지는 화면크기. 속성값을 1로 하면 css와 기기간에 1:1 관계로 출력한다.
minimum-scale=1.0: 화면을 핀치로 축소할 때 줄어들 수 있는 줌아웃 배율의 하한선. 기본값은 0.25
maximum-scale=1.0: 화면을 스프레드로 확대할 때 늘어날 수 있는 줌인 배율의 상한선. 기본값을 1.6
user-scalable: 사용자가 스마트폰 핑거터치로 화면 확대축소를 할 수 있게 설정하는 것.
viewport-fit=cover: 아이폰에서 노치 부분에 화면이 안 나오는 현상과 같이 기기에 따라 자동으로 패딩값이 적용되어 화면 상단부분에 여백이 생기는 경우가 있다. 기본값이 auto인데 이것을 cover로 해주면 전체화면으로 내용이 보여지게 된다.
위에서 설정해 놓은 코드는 시작 스케일을 1.0 최대 스케일을 1.0으로 설정해 놓은 뒤, 사용자가 스케일을 조절할 수 없게 하겠다는 뜻이다. user-scalable=no 이 부분이 핵심인 듯 하다.
