본문 바로가기

스크립트/Php 코드 팁

모바일 페이지 meta 테그

<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=yes; width=device-width;height=device-height" />
viewport: 모바일 화면에서 화면에 보여질 줌 사이즈 및 초기 설정을 하는 태그이다.
ㅇ initial-scale: 초기값으로 설정할 줌 배율.
ㅇ maximum-scale: 최대값으로 설정할 줌 배율.
ㅇ minimum-scale: 최소값으로 설정할 줌 배율.
ㅇ 위의 3가지를 모두 1로 주면 축소나 확대가 안된다.
ㅇ user-scalable: 유저가 배율을 축소/확대할 수 있는지 여부 결정.
ㅇ width=device-width: 초기 넓이을 모바일장비가 지원하는 넓이만큼으로 설정.
아이폰에서 테스트 해 본 바로는 화면이 아이폰보다 길면 실제 화면의 scale로 맞춰지고(즉 가로 스크롤을 하게 되고) 아이폰의 길이보다 작다면 아이폰의 가로 길이로 맞춰지게 된다.
아이폰이 세로로 있든 가로로 있든 그 때의 가로 길이로 맞춰지게 된다.
 ㅇ height=device-height: 초기 높이준을 모바일장비가 지원하는 높이만큼으로 설정.
세로일 때도 가로일 때와 마찬가지이다.

<input type="text" name="url" value="" autocapitalize="off" autocorrect="off" />
autocapitalize: 글 입력할 때 첫 글자 대문자로 시작할지에 대한 설정
autocorrect: 글 입력시 단어 자동 제안 설정을 사용할지에 대한 설정
*아직 테스트해보지 못함