#화면확대축소 #디바이스 #모바일 #meta태그 #viewport #설정정보

모바일 디바이스에서 meta태그를 통한 화면 확대 설정을 제어하는 방법을 알아보겠습니다. 

dimensions(면적)을 responsive로 지정하게 될경우 화면 크기를 늘렸다 줄였다 할때 확대가 되는데 이는 vieport를 통해서 설정할수 있습니다. 

<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 ] - 사용자의 핑거 터치를 통한 스마트폰 화면 축소 가능 설정 ( no로 설정시 확대 불가 )

⭐ [ viewport-fit=cover ] - 아이폰에서 노치 부분에 화면이 안나오는 현상 및 기기의 자동 패딩 적용에 따라 미출력 되는 내역에 대한 설정 ( 기본값 auto ) - cover로 설정 변경 시 노치영역에도 전체 화면출력