[기술 공유] 뷰포트 메타태그, Next.js에서 Head 태그란?

viewport 정의

뷰포트 메타 태그는 브라우저가 웹페이지를 렌더링할 때 동작하는 방법을 정의하고 뷰포트의 크기도 알 수 있다.

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

뷰포트의 너비가 웹 사이트를 보는 장치와 동일하다고 가정한다.

모바일 브라우저는 기본 뷰포트가 다르기 때문에 기본 너비 980 픽셀의 뷰포트를 사용한다.

웹페이지를 980 픽셀의 뷰포트로 렌더링하고 모든 웹페이지에 맞게 축소된다. 화면 크기가 작을수록 축소된다.

아이폰과 아이패드 비교하면 아이폰 페이지가 축소된다. 뷰포트에서 값을 변경하면 모바일 디바이스가 웹사이트를 렌더링하는 방법을 사용자가 지정할 수 있다.

viewport width

뷰포트에 정의된 너비는 이 너비에서 가장 잘 보인다고 알려주는 것과 같다.

아이폰에서 뷰포트 320이지만 태블릿에서 볼 때 웹페이지가 축소되면 안되므로 반응형에 어긋난다.

최선의 방법은 width=device-width다.

viewport scaling

모바일에서 핀치 제스처로 확대축소 가능하다. 뷰포트를 장치너비로 하면 웹페이지를 보려고 확대할 필요가 없어진다.

사용자가 페이지 방문시 확대축소할 필요 없도록 초기 배율 속성으로 비율을 1로 설정한다.

<meta name="viewport" content="initial-scale=1">

사용자가 스크롤, 확장하지 못하도록 최대 스케일 속성을 1로 설정할 수 있다.

<meta name="viewport" content="maximum-scale=1">