모바일 웹 meta 태그 설정

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

1. 설정사항

 

1) 뷰포트 선언 

  - meta name="viewport"

 

2) 콘텐트 선언

  - content="width=device-width (디바이스 크기에 맞추겠다고 선언)

    initial-scale=1.0 (초기 크기 스케일 설정)

    minimum-scale=1.0 (최소 크기 설정 / 범위: 0~10.0)

    maximum-scale=1.0 (최대 크기 설정 / 범위: 0~10.0)

    user-scalable=no (사용자 기기 확대기능 사용유무 설정, yes/no)

 

확대를 하려면 user-scalable=yes로 주면 되지만

 

만약 초기, 최소, 최대를 같은 값으로 해놨다면 user-scalable을 yes로 해도 확대가 되지않습니다. 

 

2. 예제

 

width를 사용자 디바이스 크기에 맞추고 초기 크기보다 화면을 축소할수 없고 초기 크기보다 4배까지만 확대할 수 있게 하려면?

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