화면의 보이는 영역을 다루는 기술, 뷰포트(ViewPort)
뷰포트(ViewPort) - 화면에서 실제 내용이 표시되는 영역.
반응형 웹을 제작할 때 사용하는 뷰포트의 기본 메타 태그
<meta name="viewport" content="width=device, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
initial-scale - 초기 배율 설정
minimum-scale - 최소 축소 비율 설정
maximum-scale - 최대 확대 비율 설정
user-scalable - 확대/축소 여부 설정
<뷰포트 속성>
width device-width, 양수 (뷰포트의 너비를 지정)
height device-height, 양수 (뷰포트의 높이를 지정)
initial-scale 양수 (뷰포트의 초기 배율을 지정. 기본값은 1. 1보다 작은 값을 사용하면 축소된 페이지를 표시하고, 1보다 큰 값을 사용하면 확대된 페이지를 표시합니다.)
minimum-scale 양수 (뷰포트의 최소 축소 비율을 지정. 기본값은 0.25)
maximum-scale 양수 (뷰포트의 최소 확대 비율을 지정. 기본값은 5.0)
user-scalable yes, no (뷰포트의 확대/축소 여부를 지정. 기본값은 yes. 반대로 no로 설정하면 사용자가 페이지를 확대 할 수 없습니다.)
표준 방식으로 뷰포트를 사용하는 방법
<head>
<style>
@viewport {
width:device-width; /* width 속성과 동일함 */
zoom:1; /* initial-scale 속성과 동일함 */
min-zoom:1; /* minimum-scale 속성과 동일함 */
max-zoom:1; /* maximum-scale 속성과 동일함 */
user-zoom:zoom; /* user-scalable 속성과 동일함 */
}
</style>
</head>
* 표준 방식의 뷰포트 기술에 대한 자세한 내용은 http://goo.gl/FSTGbn 에서 확인.