width=device-width는 HTML 문서의 너비(width)를 기기의 너비(device-width)로 설정하라는 의미입니다. 그러면 이 값 때문에 어떤 기기로 접속하더라도 뷰포트는 접속한 기기의 해상도를 올바르게 인식하게 됩니다.
그림 7-23 뷰포트 적용 후 화면
meta 태그의 content 속성에 사용할 수 있는 속성값은 다음 표와 같습니다.
표 7-7 content 속성값
|
속성값 |
설명 |
|
width |
뷰포트의 너비를 설정합니다. 보통 device-width로 설정합니다. |
|
height |
뷰포트의 높이를 설정합니다. 잘 사용하지 않습니다. |
|
initial-scale |
뷰포트의 초기 배율을 설정합니다. 1이 기본값이며 1보다 작으면 축소 값, 1보다 크면 확대 값으로 설정됩니다. |
|
minimum-scale |
뷰포트의 최소 축소 비율을 설정합니다. 기본으로 0.25가 적용되어 있습니다. |
|
maximum-scale |
뷰포트의 최대 확대 비율을 설정합니다. 기본으로 5.0이 적용되어 있습니다. |
|
user-scalable |
뷰포트의 확대 또는 축소 여부를 설정합니다. yes 또는 no로 지정하는데, no로 지정하면 화면을 확대 또는 축소할 수 없습니다. |