728x90
반응형
Viewport(뷰포트)는 데스크톱이나 모바일 기기 등 다양한 디바이스의 화면 크기에 맞게 웹 페이지의 크기를 조정할 때 사용합니다.
뷰포트를 설정하는 메타 태그는 <head> 태그 안에 추가하면 됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
- width : 뷰포트 너비로, device-width는 디바이스 화면 너비에 맞게 페이지 너비가 자동 설정됨을 의미합니다.
- initial-scale : 페이지가 처음 로딩될 때의 확대/축소 수준을 설정합니다. 기본값은 1.0이며, 0~10.0의 값을 설정할 수 있습니다.
- maximum-scale : 페이지의 최대 확대/축소 수준을 설정합니다. 0~10.0의 값을 설정할 수 있습니다. (1.0로 설정하면 확대/축소 불가능하며, 2.0으로 설정하면 2배 확대/축소됩니다.)
- minimum-scale : 페이지의 최소 확대/축소 수준을 설정합니다. 0~10.0의 값을 설정할 수 있습니다. (1.0로 설정하면 확대/축소 불가능하며, 2.0으로 설정하면 2배 확대/축소됩니다.)
- user-scalable : 페이지의 확대/축소 가능 여부를 설정합니다. 기본값은 yes이며, no로 설정할 경우에는 사용자가 페이지를 확대/축소할 수 없습니다.
728x90
