모바일 페이지 viewport 메타 태그

viewport 메타 태그

<meta name="viewport" content="width=device-width; user-scalable=0;" />

viewport 메타 태그에서 사용할 수 있는 매개변수 목록

매개변수	개요	대입 가능한 값
width	너비를 지정할 때 사용.	device-width: 기기의 화면 너비, 절대값으로 지정.
height	높이를 지정할 때 사용.	device-height: 기기의 화면 높이, 절대값으로 지정.
user-scalable	사용자가 화면 크기 조절 가능 여부	1, yes, true: 허용 0, no, false: 금지
initial-scale	초기 화면의 배율 값	배율 값, 1.0은 viewport 1 픽셀은 1화면 픽셀과 같다는 의미
minimum-scale	최소 배율	0 ~ 10.0
maximum-scale	최대 배율	0 ~ 10.0
안드로이드 전용
target-densitydpi	웹 페이지에 적합한 홤녀 해상도를 알려줌	device-dpi: viewport가 지정하는 dpi high-dpi, medium-dpi, low-dpi 70~400 범위 안에서 기기의 픽셀 밀도 지정.

아이폰 모바일 사파리의 경우, [설정] 메뉴 > ‘일반’ > ‘손쉬운 사용’ 에서 확대/축소 기능을 활성화 하면 user-scalable=0 설정을 무시할 수 있음.

target-densitydpi 는 아직 잘 모르겠음. 안드로이드 WebView 문서 에 설명이 잘 되어 있는듯, 그래도 잘 모르겠음.

브라우저가 페이지를 다 불러온 시점에서 window.scrollTo(0,1) 을 실행

<body onload="window.scrollTo(0,1);" >