[HTML] meta메타 태그 viewport 속성

안녕하세요. 개발자 드리머즈입니다.

웹페이지를 만들기 위해 Bootstrap을 배우고 있습니다.

Brackets와 bootstrap을 이용한 웹 페이지 만들기

Bootstrap의 html코드에는 아래와 같은 코드가 있습니다.

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

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

content에는 여러 값들이 있습니다.

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

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

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

참고

https://stackoverflow.com/questions/33767533/what-does-the-shrink-to-fit-viewport-meta-attribute-do