viewport 속성

모바일 기기에서 input 선택시 확대 될 때

모바일 기기에서 웹페이지를 이용할 때 input 태그를 클릭하면 확대가 되는 효과가 있습니다.

이 확대되는 효과를 없애고 포커스만 가도록 하는 방법은 viewport 메타 태그에 있습니다. 방법은 아주 단순한데 viewport 메타 태그에 user-scalable=no 속성을 추가해주시면 됩니다.

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

모바일 기기에서 media쿼리 적용이 안 될 때

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

viewport는 화면에 나타나는 브라우저의 크기를 나타낸다.

위의 문구를 입력하지 않으면 width값이 980px로 설정된다. 데스크탑의 브라우저는 창의 크기를 조절할 수 있어 미디어쿼리가 적용되지만 모바일의 브라우저는 창크기를 조정할 수 없어 980px 이하의 미디어 쿼리가 적용되지 않는다.

width=device-width 를 통해 브라우저의 창크기를 width값으로 가져옴으로써 모바일에 적용이 된다.

시작은 애플의 사파리 브라우저에서 시작되어 현재 대부분의 브라우저에서 지원한다.