CSS 뷰포트

CSS  뷰포트

브라우저 에서 Viewport 는 화면 크기 표시영역을 말합니다.

viewport meta 태그를 도입해 웹 개발자들이 viewport 크기와 scale을 조정할 수 있게 했고, 웹 표준은 아니지만 이제 대부분 모바일 브라우저들도 이를 지원합니다.

모바일 브라우저에서 viewport가 중요한 이유

작은 화면의 모바일 단말기에 웹 페이지 모두를 표시하려고 하니 전체적인 페이지의 배율이 조정되는 것입니다.

결과적으로 모바일 화면에 맞도록 전체적인 페이지가 축소되어 보이지만 페이지의 컨텐츠는 배율 축소가 발생해 가독성이 떨어지게 됩니다.

바로 이때 viewport를 설정하면 다양한 모바일 기기에서도 페이지의 너비나 화면 배율을 설정할 수 있습니다.

 

사용방법

 

head 태그 사이에 다음을 코드로 입력합니다.

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

 

viewport 너비 설정

<meta name="viewport" content="width=500">

너비는 px 단위 입니다.

 

너비를 장치너비로 설정

<meta name="vieport" content="width=device-width">

<meta name="vieport" content="height=device-height">

 

초기 화면 배율

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

1.0은 1:1 비율로 같게 해줍니다

initial-scale : 페이지가 처음 로딩될 때 줌 레벨을 조정합니다.

값이 1일때는 CSS 픽셀과 기기종속적인 픽셀 간의 1:1 관계를 형성합니다.

 

최소 최대 화면 배율 설정

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

최소 설정은 화면 축소하는 것을 방지합니다.

(위의 예에서는 최소 화면 설정 배율과 같이 합니다.)

 

<meta name="vieport" content="width=device=width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">

최대 화면 배율 설정은 화면 확대하는 것을 방지합니다.

 

다른 예로 초기 화면 배율을 설정하고 크기 조절을 사용하지 않게 하기

<meta name="viewport" content = "initial-scale=2.3. user-scalable=no";>

 

주의사항

• content 보다 작은 viewport width/height를 설정하면 무시됩니다.
• viewport에서 initial-scale을 설정하지 않고 width/height를 설정하면 전체 화면이 표시됩니다.
• viewport에서 initial-scale도 width/height를 설정하지 않으면 width=980px/height=1091px 이 됩니다.
• 표시 영역과 contents의 크기가 일치하지 않을때 initial-scale을 설정하면 의도하지 않은 layout이 발생합니다.

 

 

 

aboooks.tistory.com/352, 그리고 번데기 개발자님 블로그를 보고 포스팅하였습니다. 너무 감사합니다 

jw910911.tistory.com/24  

CSS - 뷰포트란 무엇일까?