[Bootstrap] meta 속성 의미 (width=device-width, initial-scale=1, shrink-to-fit=no)

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

meta 태그 속성은 대부분 name과 content속성으로 이루어져 있습니다. 그 중에서 viewport는 웹 페이지의 크기를 결정합니다.

width=device-width는 웹 페이지의 크기가 모니터가 스마트폰의 실제 액정 크기를 따라가도록 합니다.

initial-scale=1는 보여지는 화면의 zoom up 정도를 1배율로 한다는 것입니다. 이 값을 키우면 보여지는 화면이 줌 되어 크게 보입니다. 마치 스마트폰에서 작은 사진을 두 손가락을 이용해 확대시키는 것과 비슷합니다.

shrink-to-fit=no는 애플의 safari(사파리) 브라우저에만 영향을 미치는 속성 같습니다. 그 중에서도 사파리 11 이전의 버전과 관련된 것 같습니다. 사파리는 기본적으로 viewport의 크기보다 보여줘야할 내용이 크면, 보여줘야할 내용을 줄여서라 보여준다고 하네요. 그것을 방지하기 위해 이 코드를 쓴다고 합니다.