기술이 된 상상/TIL
ChatGPT가 알려주는 HTML meta viewport(뷰포트)
Indigo_Pure
2024. 8. 6. 12:08
728x90
반응형
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속성은 무시됩니다.
참고
728x90
반응형