안녕하세요.
오늘은 모바일 viewport 설정을 알아보겠습니다.
viewport 설정
viewport 설정이 필요한 이유는 모바일 브라우저에서 웹 페이지를 브라우징 할 때는
데스크탑 환경처럼 웹페이지 전체를 자연스럽게 브라우징 할 수 있도록 풀브라우징을 지원합니다.
그렇기 때문에 웹페이지를 모바일에서 보면 전체적인 페이지가 축소되어 보여 가독성이 떨어지게 됩니다.
웹페이지를 모바일로 보게 되면 기본 viewport는 980px이어서 이로인해 작게 보입니다.
그래서 viewport를 설정하게 되면 다양한 모바일 기기에서도 페이지의 너비나 화면 배율에 맞게 볼 수 있습니다.
사용방법
head 태그 사이에 다음과 같이 코드를 입력합니다.
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">-width=device-width: 페이지의 너비를 기기의 스크린 너비로 설정합니다. 일반적인 숫자값이 들어갈 수도있음
-height : viewport의 세로 크기
-initial-scale=1.0 : 페이지가 처음 로딩될 때의 확대/축소가 되지 않은 원래 크기를 가짐 0~12사이
-minimum-scale: viewport의 최소 배율값, 기본값은 0.25
-maximum-scale: viewport의 최대 배율값, 기본값은 1.6
-user-scalable: 사용자의 확대/축소 기능을 설정, 기본값은 yes
(no로 설정하면 아이폰 input 박스 포커스 시 발생하는 확대기능 막을 수 있음)
감사합니다.