[모바일기획] 메타 태그 사용법

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

 

웹 앱과 모바일 웹에서는 모바일 기기에서의 확대/축소 가능 여부와 기기마다 액정 크기가 다르다는 것을 고려해야 합니다. 따라서 이를 인식할 수 있는 메타 태그를 사용해야 하죠. 기기별로 크기를 맞추기 위해서는 다음과 같이 마크업 합니다.

 

이 태그는 다음과 같은 속성을 지정합니다.

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

물론 가로값이 320px만 원한다면 width=320px 로 설정해도 되나 이렇게 되면 해상도가 큰 디바이스에서는 여백이 너무

크거나 화면이 너무 작게 보일 수 있으므로 주의해야 합니다.