HTML : Viewport Meta Tag 이해하기 : 예제, 방법

HTML : Viewport Meta Tag 이해하기 : 예제, 방법

 

새로운 웹 디자인 작업을 할 때 고려해야 할 사항 중 하나는 반응 형 디자인입니다. 만들려는 웹 사이트가 반응형 디자인이 필요할 수 있습니다.

모든 외부 사이트는 반응형 디자인을 고려해야한다고 생각합니다. 모바일 장치 사용자가 원하는 것을 확대하여 볼 수 있기 때문에 반응형 디자인이 가치가 없다고 생각하는 사람들이 있지만 개발자가 모든 장치에서 웹 사이트를 쉽게 사용할 수 있어야 한다고 생각합니다.

 

 

반응형 디자인이란

반응형 디자인은 웹 사이트 디자인이 보고있는 장치의 너비와 높이에 적응할 수 있는 경우입니다. 반응형 디자인은 CSS 파일에서 미디어 쿼리를 사용하여 설정 한 특정 중단 점에 따라 HTML 요소의 스타일을 변경하여 수행됩니다.

일부 요소에 간단한 너비 : 100 % 만 추가하면 모바일 장치에서 볼 때 반응하기에 충분합니다. 중단점은 다양한 CSS 스타일을 사용할 폭 범위를 정의합니다. 일반적으로 휴대 전화, 7 인치 태블릿, 10 인치 태블릿, 13 인치 노트북 및 데스크톱 모니터와 같은 다양한 크기의 장치입니다.

중단점을 픽셀 너비 또는 최소 장치 픽셀 비율로 정의 할 수 있습니다. 아래 코드는 미디어 쿼리를 시작하는 데 도움이됩니다.

 

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

 

 

Viewport 정의

뷰포트 메타 태그는 브라우저가 웹 페이지를 렌더링 할 때 동작하는 방법을 알려주고 뷰포트의 크기를 알 수 있습니다. 뷰포트는 보기 중인 페이지의 섹션이며, 예를 들어 모바일 장치에서 웹 페이지를 보는 경우입니다.

페이지 왼쪽 상단을 표시하도록 확대된 경우 뷰포트는 특정 너비로 설정되었습니다. 페이지의 전체 너비를 볼 수 있지만 화면에 모두 맞게 확대 / 축소 된 경우 웹 페이지의 전체 너비를 표시하도록 뷰포트가 설정되었습니다.

뷰포트 메타 태그를 사용하는 예는 다음과 같습니다.

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

 

이는 뷰포트의 너비가 웹 사이트를 보고있는 장치와 동일하다는 것을 정의합니다. 웹 사이트의 배율이 100 %로 설정되고 최대 배율이 100 %로 설정됩니다. 모바일 브라우저마다 기본 뷰포트가 다르기 때문에 대부분의 모바일 브라우저는 기본 너비 980 픽셀의 뷰포트를 사용합니다.

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

iPhone과 iPad에서 동일한 웹 페이지를 비교하면 iPad에서 페이지를 보는 것보다 iPhone 페이지가 축소됩니다. 뷰포트에서 값을 변경하면 모바일 장치가 웹 사이트를 렌더링하는 방법을 사용자 지정할 수 있습니다.

 

 

Viewport Width

뷰포트에서 정의하는 너비는 브라우저에게이 웹 페이지가이 너비에서 가장 잘 보인다고 알려주는 것과 같습니다. iPhone에서 가장 잘 볼 수있는 웹 페이지를 설정 한 경우 뷰포트를 320px로 설정합니다.

<meta name="viewport" content="width=320">

 

그러나 이 페이지를 태블릿에서 보는 것처럼 웹 페이지가 축소되어 320px의 영역만 보는 것처럼 반응형 디자인에는 적합하지 않습니다. 반응형 디자인을 위한 최선의 방법은 사용중인 장치와 동일하게 뷰포트의 너비를 설정하는 것입니다.

<meta name="viewport" content="width=device-width">

 

 

Viewport Scaling

모바일 장치에서는 핀치 제스처를 사용하여 페이지를 확대 및 축소 할 수 있지만 뷰포트를 장치의 너비로 설정하면 웹 페이지를보기 위해 확대 할 필요가 없습니다. 

웹 페이지가 처음 표시 될 때 확대되지 않도록 초기 배율 속성을 사용하여 기본 확대 / 축소를 설정할 수 있습니다. 사용자가 페이지를 방문 할 때 확대 / 축소 할 필요가 없도록하려면 비율을 1로 설정합니다.

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

 

사용자가 전혀 스크롤하지 못하도록 하려면 더 이상 확장 할 수 없도록 최대 스케일 속성을 1로 설정할 수 있습니다.

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

 

 

Viewports 예시

아래 이미지는 서로 다른 두 개의 뷰포트에서 동일한 이미지를 보는 예를 보여줍니다. 첫 번째 이미지는 기본 뷰포트 980 픽셀의 이미지를 보여주고 두 번째 이미지는 동일한 이미지이지만 320 픽셀의 뷰포트에서 봅니다.

 

 Image Source: Apple explanation of viewport meta tag.

Resources - Safari - Apple Developer

 

 

Viewport 이해

다른 뷰포트 크기를 사용하는 몇 가지 예를 보려면 여러 뷰포트 설정을 보여주는 좋은 Github 프로젝트가 있습니다. 링크를 클릭하면 모바일 브라우저가 링크 모양을 보여줍니다.

 

 Understanding Viewport

Understanding viewport