ChatGPT가 알려주는 HTML meta viewport(뷰포트)

웹 브라우저 뷰포트 설정

 

 

Viewport는 사용자가 웹 페이지를 볼 수 있는 화면 영역을 의미합니다. 이는 브라우저 창 또는 화면의 가시 영역을 나타내며, 특히 모바일 장치에서 중요한 개념입니다. 다양한 디바이스와 화면 크기가 있는 환경에서 웹 페이지가 어떻게 보일지 제어하는 데 사용됩니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

주요 속성

• width: viewport의 너비를 설정합니다. 값으로 device-width를 사용하면 디바이스의 너비에 맞춰집니다.
• height: viewport의 높이를 설정합니다. 일반적으로는 잘 사용되지 않습니다.
• initial-scale: 초기 확대/축소 비율을 설정합니다. 기본값은 1.0입니다.
• minimum-scale: 사용자가 페이지를 축소할 수 있는 최소 비율을 설정합니다.
• maximum-scale: 사용자가 페이지를 확대할 수 있는 최대 비율을 설정합니다.
• user-scalable: 사용자가 확대/축소를 할 수 있는지 여부를 설정합니다. yes 또는 no 값을 가집니다.

그 외 속성

• shrink-to-fit: 내용이 viewport 크기에 맞게 자동으로 축소되는지를 설정합니다. yes 또는 no 값을 가집니다.
• viewport-fit: iOS 11 이상에서 지원되며, 콘텐츠가 안전 영역을 포함한 전체 화면을 차지할 수 있도록 합니다. contain, cover 값을 가집니다.

viewport-fit 속성

iOS 11 이상에서 지원되는 속성으로, 웹 페이지의 콘텐츠가 전체 화면을 어떻게 채울지 제어합니다. 이 속성은 주로 iPhone X 이상과 같은 모서리가 둥글거나 홈 인디케이터가 있는 화면에서 유용합니다.

 

viewport-fit: auto

• 코드

<meta name="viewport" content="viewport-fit=auto" />

• 설명: 기본값으로 설정되며, 특별한 조정 없이 화면의 전체 영역을 사용합니다.
• 동작: 콘텐츠가 화면의 전체 영역을 차지하며, 노치(예: iPhone X의 상단 노치)나 홈 인디케이터와 같은 UI 요소가 있는 영역도 포함됩니다.
• 결과: 기본적으로 화면의 안전 영역(safe area)에 대한 고려 없이 콘텐츠가 전체 화면을 채웁니다. 노치나 홈 인디케이터와 겹칠 수 있습니다.
• 예시:

+-----------------------------+
| [콘텐츠]                     |
|  (콘텐츠의 일부가               |
|   노치에 의해 가려질 수 있음).    |
|                             |
|                             |
|                             |
| [콘텐츠]                      |
|  (콘텐츠의 일부가               |
|   홈 인디케이터에 의해           |
|   가려질 수 있음)              |
+-----------------------------+

 

viewport-fit: cover

• 코드

<meta name="viewport" content="viewport-fit=cover" />

• 설명: 콘텐츠가 화면의 전체 영역을 채우도록 확장됩니다.
• 동작: 콘텐츠가 화면의 전체 영역을 덮으며, 화면 모서리나 UI 요소(예: 노치, 홈 인디케이터)와 겹칠 수 있습니다.
• 결과: 콘텐츠가 전체 화면을 커버하도록 확장되지만, 안전 영역(safe area) 내에서 콘텐츠가 자동으로 조정되지는 않습니다. 노치나 홈 인디케이터와 겹칠 수 있어 중요한 콘텐츠가 가려질 수 있습니다.
• 예시:

+-----------------------------+
| [콘텐츠]                     |
|  (콘텐츠의 일부가               |
|   노치에 의해 가려질 수 있음).    |
|                             |
|                             |
|                             |
| [콘텐츠]                      |
|  (콘텐츠의 일부가               |
|   홈 인디케이터에 의해           |
|   가려질 수 있음)              |
+-----------------------------+

 

viewport-fit: contain

• 코드

<meta name="viewport" content="viewport-fit=contain" />

• 설명: 콘텐츠가 화면의 안전 영역 내에 포함되도록 조정됩니다.
• 동작: 콘텐츠가 화면의 안전 영역(safe area) 내에 위치하도록 조정됩니다. 노치나 홈 인디케이터와 겹치지 않도록 콘텐츠를 자동으로 조정하여 여백이 생길 수 있습니다.
• 결과: 화면 모서리와 UI 요소(예: 노치, 홈 인디케이터)와 겹치지 않도록 콘텐츠가 안전 영역 내에 위치하며, 여백이 생길 수 있습니다. 콘텐츠가 화면 전체를 채우지는 않습니다.
• 예시:

+-----------------------------+
| [콘텐츠]                     |
|  (콘텐츠가 노치 영역을           |
|   덮음)                      |
|                             |
|                             |
|                             |
| [콘텐츠]                     |
|  (콘텐츠가 홈 인디케이터         |
|   영역을 덮음)                 |
+-----------------------------+

 

요약

• auto: 기본값으로, 화면의 전체 영역을 사용하여 콘텐츠가 렌더링됩니다. 노치와 홈 인디케이터와 겹칠 수 있습니다.
• cover: 콘텐츠가 화면 전체를 채우도록 확장됩니다. 노치와 홈 인디케이터와 겹칠 수 있습니다.
• contain: 콘텐츠가 화면의 안전 영역 내에 위치하도록 조정됩니다. 노치와 홈 인디케이터와 겹치지 않지만, 여백이 생길 수 있습니다.
• iOS 11 미만 & android 에서는 viewport-fit속성은 무시됩니다.

 

참고

• ChatGPT
• https://frontdev.tistory.com/entry/META-IOS11의-viewport-fitcover-속성