모바일웹에서 확대/축소 되지 않는 웹페이지의 비밀

비밀이라고 할 것까지는 없겠습니다만 점차 모바일 전용페이지들이 사용하고 있는 메타태그를 하나 얘기하려 합니다.

안드로이드폰에서 브라우저를 통해 네이버에 접속하려면 다음과 같은 화면을 볼 수 있습니다. 지난 글에서도 말씀드렸지만 몇 글자 입력하지 않아도 가이드를 다 해줍니다.

브라우저 종류가 무엇인지 판별해서 자동으로 http://m.naver.com 로 옮겨주죠. 화면을 조금 움직이면 좌측 하단에 아이콘이 보입니다. 터치하면...

전체 화면에서 보고 싶은 영역으로 빨리 이동할 수 있게끔 나옵니다.

PC 버전으로 보면 조금 달라집니다.

안드로이드에서 자주 보게되는 줌아웃/줌인 아이콘이 나타나게 되죠.

웹페이지에 다음과 같은 태그가 들어갈 경우 줌 기능을 사용하지 않도록 할 수 있습니다.

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

content를 풀어서 보면

initial-scale=1.0;

maximum-scale=1.0;

minimum-scale=1.0;

user-scalable=no;

감잡으셨죠. ^^

sponsored post : [Adobe RIA 공식 사이트(www.adoberia.co.kr)]