모바일 웹 퍼블리싱 작업시 meta 태그 설정 정의하기 (Mobile, meta tag)

모바일 웹 퍼블리싱 작업 시 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" / >

 

---

본 게시글이 도움이 되셨다면 로그인 없이 클릭 가능한 ♥ 공감 버튼 클릭 부탁드립니다 :) 
"당신의 하루가 별보다 빛나길"