ViewPort (뷰 포트), <meta> 태그

데스크 탑, 스마트 폰의 브라우저 화면 크기 / 메뉴 바와 탭 영역을 제외한 영역

 

스마트 폰/태블릿	해상도	뷰 포트
iPhone 6,7,8	750x1334	375x667
iPhone 6 Plus, 7 Plus, 8 Plus	1080x1920	414x736
Galaxy Note 10	1080x2280	412x869
Galaxy S8, S8+, S9, S9+	1440x2960	360x740
LG G5	1440x2560	480x853
iPad Air 1&2, iPad 3rd & 4th	1536x2048	768x1024
Galaxy Tab 10	800x1280	800x1280

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

 <meta> 태그로 뷰 포트를 설정

 여기서 width=device-width는 웹 페이지의 너비를 모바일 기기의 뷰 포트 너비와 일치시켜서 화면에 표시하라고 브라우저에게 알리는 것이다.

 initial-scale=1.0은 초기 배율을 기본 값인 1.0으로 설정한다는 의미이다.

 

<meta> 태그

 

속성	설명
width	너비 설정. 기본은 device-width
height	높이 설정, 기본은 devide-height
initial-scale	초기 배율, 기본 1.0 ( 0.5 : 반으로 축소 / 2.0 : 두배 확대 )
user-scalable	기본 no ( yes : 화면 확대/축소 가능 no : 화면 확대/축소 불가 )
minimum-scale	기본 0.25 ( 축소 가능 한 최소 값 )
maximum-scale	기본 5.0   ( 확대 가능 한 최대 값 )

뷰 포트의 너비를 모바일 기기의 너비와 일치시키고, 

초기 배율을 1.0, 화면 확대/축소 가능, 최대 3배까지 확대할 수 있게 한다면
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable= yes, maximum-scale=3.0">