View Port(뷰 포트), 웹페이지를 모바일환경에 맞게 보여주기, 모바일 HTML기본 셋팅

 

View Port(뷰 포트)

·       디스플레이의 화면상의 화상을 표시하는 것을 의미합니다.

·       스마트 디바이스 기종별로 각기 다른 화면 크기에 맞춰 개발하는 것이 아닌 자동으로 화면 사이즈에 맞추어서 표시해주게 됩니다.

 

 

웹페이지를 모바일환경에 맞게 보여주기

각 디바이스에 최적화된 상태로 보여지게 됩니다.

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

 

content="width=device-width	·       디바이스의 넓이를 구해서 해당 넓이에 맞춰 웹 페이지를 표시해 줍니다.
initial-scale=1	·       웹사이트를 모바일화면에서 볼때 화면을 확대/축소된 상태로 보이도록 합니다. ·       1.0으로 설정하면 확대 없이 기본형태로 보이도록 설정합니다.

 

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

 

 

모바일  HTML기본 셋팅

메타테그를 이용하여 모바일에 적합한 사이트 만들기

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />

 

속성	설명
content="width=device-width"	·       웹페이지의 가로사이즈를 모바일의 가로사이즈에 맞춘다는 의미입니다. ·       가로 스크롤이 생기지 않습니다.
initial-scale=1	·       화면을 초기화 할때 몇 배율로 할 것인지 지정합니다. ·       1로 지정하면 확대/축소없이 기본 배율로 보여집니다.
maximum-scale=1	·       손가락 두개를 쫙 벌려서 확대시 확대 비율을 설정합니다. ·       1로 하면 확대가 안되고 2로 하면 두배, 3으로하면 세배 확대가 됩니다.
minimum-scale=1	·       반대로 손가락 두개를 오므려서 얼마나 축소할 수 있는지에 대한 설정입니다. ·       1로하면 축소가 안되고, 0.5는 50%축소가 됩니다.
user-scalable=no	·       확대축소가 가능한지에 대한 부분입니다. ·       Maximum-scale과 minimum-scale로 확대축소를 할 수 있게 설정해놓아도 여기에 no를 설정하면 확대/축소가 되지않습니다. yes를 해야 확대/축소가 가능합니다.
target-densitydpi=medium-dpi	·       사이트가 어떤 화면크기에 맞추어 개발되었는지를 명시해주는 속성입니다.