HTML5앱 viewport 공통설정 mj.viewport.js 라이브러리

mj.js.lib-master.zip

출처 : 김명준님 티스토리 http://html5dev.kr/m/218

JS 라이브러리 파일 주소

관련 사이트: https://github.com/mjpress/mj.js.lib

이 라이브러리는 HTML5용 모바일용 웹앱을 만들 때 스마트폰이나 타블렛에서 각각 다른 행상도를 가진 기기에 따라 보통 개발자가 일일이 대응해야 하는데 그것을 간단하게 헤결하기 위해 앱에 viewport를 설정하게 됩니다.

 

viewport는 앱에서 설정하는 가상 화면폭으로 이것을 설정해 두면, 개발자가 이 가상 화면 폭에 맞춰 개발하게 됩니다. 기기로 실행했을 때 기기의 실제 크기에 자동적으로 화면폭을 맞춰 줌이 되도록 설정합니다.아래와 같이 meta태그에 추가만 하면 기기별로 대응하는 코드를 작성하지 않아도 됩니다.

 

<meta name="viewport" content="width=640" />

 

위와 같이 폭을 640px로 지정하면 화면 가로폭을 640px로 화면을 만들고, 기기로 실행했을 때 해당 기기의 해상도에 따라 자동적으로 확대 및 축소를 하여 보여주게 됩니다. 단, 이 viewport설정은 iOS에서는 브라우저 자체에 기능으로 포함되어 있지만, Android기기나 PC에서는 사용할 수 없습니다. 그러나 mj.viewport.js는 iOS, Android, PC등 상관없이 viewport가 통일된 지정크기대로 보여줄 수 있는 JavaScript라이브러리입니다.

 

실행방법은 아래와 같습니다.

 

<script type="text/javascript" src="mj.viewport.js"></script> <script type="text/javascript"> function update(scale) {        document.getElementById("useragent").textContent = navigator.userAgent;        document.getElementById("scale").textContent = scale || "none";       if (mj.viewport.isIos()) {               document.getElementById("device").textContent = "iOS";        } else if (mj.viewport.isAndroid()) {               document.getElementById("device").textContent = "Android";        } else if (mj.viewport.isPCBrowser()) {               document.getElementById("device").textContent = "PC";        } } mj.viewport({    width : 600,    onAdjustment : update}); if (mj.viewport.isIos()) {        window.addEventListener("load", function() {        update(null);    }); } </script>