[HTML & CSS] viewport

1. 뷰포트란 무엇인가?

<meta>태그의 name="viewport"는 모바일 브라우저의 뷰포트 크기 조절을 위해 존재합니다.

viewport란 사용자에게 보여지는 디스플레이상의 표시 영역을 의미합니다.

 

빨강영역

 

 

데스크탑의 viewport는 브라우저 창의 viewport와 같고, 사용자가 브라우저 창의 크기를 조절할 수 있습니다.

 

하지만, 모바일의 경우 veiwport창보다 크거나 작을 수 있기 때문에 두 손가락 줌인, 줌아웃등을 이용하여 화면을 조정합니다.

 

2. 필요한 이유

 

viewport가 필요한 이유는 데스크탑에서 보는 화면을 모바일로 봤을 때 잘 볼 수 있게 하기 위해서 입니다.

 

모바일 페이지를 접속할때 원하는 화면은 다음과 같은데 viewport를 설정하지 않게되면 다음과 같은 일이 발생합니다.

 

 

위 사진과 같이 너무 크거나 너무 작아서 원하는 사진이 나오지 않게 됩니다.

 

3. 사용방법

 

뷰포트의 너비를 장치의 너비에 맞추고, 스케일을 1.0(100%)로 하는 방법을 사용합니다.

 

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

 

---

참고블로그