컨텐츠 바로가기


사용자 가이드 상세

뷰포트(Viewport)

 


1. 뷰포트란?


뷰포트란, 화면상의 화상 표시 영역을 뜻합니다.



PC의 뷰포트와 Mobile 뷰포트는 약간 다릅니다.


PC의 뷰포트는 창의 크기를 조절하면서 뷰포트의 크기를 조절할 수 있습니다.

웹페이지가 뷰포트보다 작으면, 스크롤로 나머지를 볼 수 있습니다.


 * 이미지 출처 : 애플





Mobile 뷰포트는 웹브라우저 창보다 크거나 작을 수 있습니다.


그리고 창, 스크롤바, 크기조절 버튼이 없습니다.

대신, 상하좌우로 움직이고, 더블탭을 할 수 있고, 확대 축소(zoom in/out)을 통해 뷰포트 배율을 바꿀 수 있습니다



▲ 뷰포트를 지정하지 않았을 경우



  뷰포트의 width값을 device-width로 설정한 경우


* 이미지 출처 : 애플

 


2. 뷰포트 설정이 필요한 이유


PC를 기반하여 웹페이지를 설계하게 되면 Mobile에서 열었을때

내용이 작게 보입니다. (위의 뷰표트를 설정하지 않았을 경우 이미지 참조)


뷰포트를 설정하면 다양한 모바일 기기에서 페이지 너비, 배율, 확대, 축소여부를 설정할 수 있습니다.

Mobile에 최적화된 웹페이지를 만들려면 html파일 <head> 안에 뷰포트(viewport)를 설정해야합니다.




현재 공개된 모바일웹의 기본 설정 뷰포트는

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes"> 입니다.


 태그  설명
 width=device-width  각 모바일 기기의 해상도에 맞춰서 보일 수 있도록 설정합니다.
 initial-scale  페이지가 보이는 기본 비율을 지정합니다. (아이폰의 경우 스케일이 1이면 가로 320px에 맞춰집니다.)
 maximum-scale  페이지가 보이는 최대 비율입니다.
 minimum-scale  페이지가 보이는 최소 비율입니다.
 user-scalale  모바일 기기에서 웹 페이지를 확대 가능한 지의 여부를 지정합니다.



[참고 사이트]


* W3C Shools

* Safari Developer Library

 * Google Developers


TOP

목록 게시안함 삭제 수정