본문 바로가기

Local Oriented/HTML CSS JS

모바일 기기에 특화된 메타 태그

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

maximum-scale 을 1.0 이상으로 설정해도 user-scalable=no 이면 화면 확대/축소가 불가.

애플에서는.. user-scalable 이 no 라도,
minimum-scale 을 1.0 이상으로 설정하면 initial-scale 값에 상관없이 최초 화면이 해당 크기로 확대.
안드로이드에서는.. user-scalable 이 no 라면,
minimum-scale 이나 initail-scale 값에 상관 없이 크기 불변.. ㅎㅎ
user-scalable 이 yes 이면 사용자가 확대해 볼때 화면 사이즈가 변경.
아직 통일이 안 되어 있음.

애플이나 안드로이드나 동일하게 작동하는 것은..
아예 사이즈가 고정되는 것은 상기와 같고,
사이즈를 일정하게 확대/축소 시키는 것은 아래와 같음..

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0, user-scalable=yes, target-densitydpi=medium-dpi" />

target-densitydpi=medium-dpi 모바일 기기에서 동일한 해상도로 보여지도록 세팅