모바일 웹 퍼블리싱 작업 시 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" / >
본 게시글이 도움이 되셨다면 로그인 없이 클릭 가능한 ♥ 공감 버튼 클릭 부탁드립니다 :)
"당신의 하루가 별보다 빛나길"
'WEB·MOBILE- HTML > HTML&CSS' 카테고리의 다른 글
이미지 없을때 대체 이미지 태그 적용 (img src html css) (0) | 2020.09.23 |
---|---|
HTML CSS로 a 태그 onfocus=this.blur() 효과 주기 (0) | 2020.05.19 |
tabindex의 기능 및 역할에 대해서 알아보자. html/css (0) | 2020.05.14 |
사이트 링크(url) 공유시 보여지는 섬네일 적용 방법 (0) | 2020.03.03 |
HTML CSS display none과 block 속성에 대한 이해 (0) | 2020.02.03 |