minimum-scale=1 : 최소 크기 설정 (기본값 : 0.25, 범위 : 0~10.0)
maximum-scale=1 : 최대 크기 설정(최대 배율 범위 : 0~10.0)
user-scalable=no : 사용자 단말의 확대기능 사용 유무 선언(yes/no)
처음 모바일웹을 작성 할 때 애먹었던 게 폰트와 이미지 사이즈였다. 수많은 모바일 화면 크기를 어떻게 알고 각각의 이미지 사이즈를 변경할까 고민이 컷다. 하지만 viewport를 설정하는 태그 한 줄이면 해결이 가능했다. 보여지고 있는 콘텐츠를 화면에 어떻게 보여질 것인가 설정하는 meta 태그였다. PC 화면 기준으로 이미지를 작성하도 이미지나 폰트를 감싸고 있는 태그의 영향을 받아 사이즈를 알아서 변경해 준다.
이런 태그가 있을 때 image.gif가 div의 폭보다 크다면 image.gif의 크기는 div의 가로폭에 맞춰서 리사이징이 된다. 하지만 폰트의 경우 이렇게 리사이징이 되다보면 너무 작게 보여질 때가 있다. 이럴 때가 내가 지정한 사이트에 맞춰서 보여지도록 할 필요가 있다.
style 설정 할 때 페이지 상단에 딱 한 번만 넣어주자. 위의 viewport 작성시 maximum-scale=1 값으로 되어 있어야 한다.
* {-webkit-text-size-adjust:auto}
auto : webkit을 선언하지 않았을 때와 같은 값이다. 텍스트 크기는 화면폭의 영향을 받는다.
* {-webkit-text-size-adjust:none}
none : 폰트의 크기가 화면 폭에 영향을 받지 않는다.
max-width:100%;는 일부 swipe 스크립트가 적용 안 될 수 있으니 그럴 경우에는 img 태그에만 적용하시기 바랍니다.
webkit에 대해서는 필자가 확실한 이해가 없고 실제로 적용한 사례를 기반으로 한 것이기 때문에 디바이스 마다 다르게 적용 될 수 있습니다.
출처 : http://ziumb.tistory.com/51
|
|
번 호
카테고리
제 목
이름
조회수
Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL + Mariadb ]
서버위치 : 오라클 클라우드 춘천 실행시간 : 0.07036 초 to webmaster... gogo sea. gogo sea.
살인!
html/css/xml
