[CSS] 브라우저 Viewport

Viewport

• 브라우저에서 viewport는 메뉴바, 탭 영역 등을 제외한 순수한 화면 영역.
• viewport 영역은 각각의 디바이스 크기에 따라 다양함.
• 브라우저를 확대하거나 축소할 경우 viewport 크기는 바뀌지만, 브라우저 창 크기인 outerWidth는 변하지 않음.

예시: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

속성

• width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정합니다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 줍니다.
• initial-scale=1.0 : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 합니다. 0~10 사이의 값을 가집니다.
• minimum-scale : 줄일 수 있는 최소 크기를 지정합니다. 0~10 사이의 값을 가집니다.
• maximum-scale : 늘릴 수 있는 최대 크기를 지정합니다. 0~10 사이의 값을 가집니다.
• user-scalable : yes 또는 no 값을 가지며 사용자가 화면을 확대/축소 할 수 있는지는 지정합니다.

위의 줌 레벨은 1이 원래크기이고, 0.5 라면 50% 축소를 뜻합니다.

 

 

참고 사이트:

pks2974.medium.com/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%B7%B0%ED%8F%AC%ED%8A%B8-layout-%EC%99%80-visual-viewport-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-47756d5ee3cf

 

https://offbyone.tistory.com/110 [쉬고 싶은 개발자]