본문 바로가기

WEB_TECH/모바일웹

모바일웹 meta 태그를 사용한 페이지 크기 제어

모바일 웹의 기본해상도는 각 모바일 기기의 화면크기에 맞게 나와야 하기 때문에 가로 크기를 device-width 속성을 사용합니다.

웹페이지의 크기를 제어하는<meta> 태그 속성입니다.

---------------------------------------------------------------------------------

width=device-width   각 모바일 기기의 해상도에 맞춰서 보일 수 있도록 설정

initial-scale=            페이지가 보이는 기본 비율을 설정 ( 아이폰은 scale이 1이면 가로 320px에 맞춰집니다.)

maximun-scale=       페이지가 보이는 최대 비율

minimum-scale=       페이지가 보이는 최소 비율

user-scalable=        모바일 기기에서 웹 페이지의 확대 가능 여부 지정

---------------------------------------------------------------------------------


모바일웹 상단에 사용되는 메타태그 예입니다.


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