모바일 웹 제작시 meta태그 설정 [Mobile,meta]

모바일 웹 제작시 meta태그 설정

 

설정방법

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

 

설정 사항

meta name="viewport" : 뷰포트 선언

content="width=device-width" : 콘텐츠를 표현할 넓이 ('디바이스 크기에 맞추겠다' 고 선언)

intial-scale=1 : 초기 크기 설정(기본 꽉찬 화면)

minimum-scale=1 : 최소 크기 설정 (기본값 : 0.25, 범위 : 0~10.0)

maximum-scale=1 : 최대 크기 설정(최대 배율 범위 : 0~10.0)

user-scalable=no : 사용자 단말의 확대기능 사용 유무 선언(yes/no)
---------------------------------------------------------------------------------------

 

※ 확대를 할수 있게하려면
content="user-scalable=no / maximum-scale=1.0

 content="user-scalable=yes / maximum-scale=5.0
으로 하면 되지만 텍스트 입력할때 자동확대가 되기때문에
불편완성도가 떨어지므로 최종완성을 사이즈조절불가로 하는게 좋은듯 하다.

 

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

meta name="viewport"
뷰포트 선언
 

user-scalable=no
사용자 단말의 확대기능을 사용 유무 선언. 현재는 no 즉 확대 불가능 선언

user-scalable=yes
사용자가 확대/축소하여 볼 수있다라는 뜻

 
intial-scale=1
초기의 크기를 설정해줍니다. 1배수인 1이라고 명명해줬습니다.

initial-scale=1.0
초기 확대비율

 
minimum-scale=1
최소 크기를 설정해줍니다. 1배수인 1이라고 명명해줬습니다.

 

maximum-scale=5.0

최대 5배 까지 확대 되게 보여 준다라는 뜻

maximum-scale=1
최대 크기를 설정해줍니다. 1배수인 1이라고 명명해줬습니다.

 

minimum-scale=0.25,

최소 25%까지 축소하여 보여준다라는 뜻

 

target-densitydpi=device-dpi

모바일 해상도로 맞춰서 보여 준다라는 뜻

모바일 해상도는 dpi
 

content="width=device-width"

콘텐츠를 표현할 넓이를 명명 해줍니다. 현재는 "width=device-width" 즉 크기=디바이스의 크기에 맞추겠다고 선언해주었습니다.

컨텐츠 사이즈1000px

 <meta name="viewport" content="width=1000" / >