동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
웹에서 사용자가 접속하는 모바일 장치를 인식하는 방법은 다양하게 제공되고 있습니다.
그중에서 자바스크립트 라이브러리 mobile-detect.js를 소개합니다.
http://hgoebl.github.io/mobile-detect.js/
user-agent문자열 패턴을 비교하여 사용자가 접속하는 장치의 모바일 여부를 판단합니다. 또한, 사용자가 사용하는 브라우저와 OS를 비롯한 다른 정보도 얻을 수 있습니다.
적용방법
1. 라이브러리를 다운로드하거나 CDN을 이용하여 웹문서에 추가합니다.
<script src="mobile-detect.js"></script> 또는
<script src="https://cdn.jsdelivr.net/npm/mobile-detect@1.4.3/mobile-detect.min.js"></script>
2. userAgent 문자열을 생성자에 전달합니다.
<script>
var md = new MobileDetect(window.navigator.userAgent);
// ---
// ---
</script>
3. 라이브러리에서 제공하는 다양한 메소드를 이용하여 정보를 감지합니다.
console.log( md.mobile() ); // 'Sony'
console.log( md.phone() ); // 'Sony'
console.log( md.tablet() ); // null
console.log( md.userAgent() ); // 'Safari'
console.log( md.os() ); // 'AndroidOS'
console.log( md.is('iPhone') ); // false
console.log( md.is('bot') ); // false
console.log( md.version('Webkit') ); // 534.3
console.log( md.versionStr('Build') ); // '4.1.A.0.562'
console.log( md.match('playstation|xbox') ); // false
강좌설명 전체 소스
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>모바일 장치 감지하기</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mobile-detect@1.4.3/mobile-detect.min.js"></script>
</head>
<body>
<h1>모바일 장치 감지하기</h1>
<div>
<button id="detect">감지확인</button>
</div>
<script>
$('#detect').click(function(){
var md = new MobileDetect(window.navigator.userAgent);
console.log( "Mobile: " + md.mobile());
console.log( "Phone: " + md.phone());
console.log( "Tablet: " + md.tablet());
console.log( "OS: " + md.os());
console.log( "userAgent: " + md.userAgent());
});
</script>
</body>
</html>그누보드5/영카트5에서 모바일 장치를 인식하는 과정
1. G5_IS_MOBILE
그누보드/영카트에서 사용자가 모바일로 접속을 하였는지 확인할 때 PHP 상수 G5_IS_MOBILE로 확인합니다.
index.php, tail.php 파일 등 모바일 접속을 확인할 때 이 상수를 사용합니다.
if (G5_IS_MOBILE) {
// 모바일 파일로 이동....
}
2. 상수선언
G5_IS_MOBILE 상수는 /common.php 파일에서 선언하고 있습니다. 버전에 따라 위치는 조금 다를 수 있지만
560라인 근처에 아래와 같이 선언되어 있습니다.
이 선언에 보면 $is_mobile 변수가 나오는데 이 변수값은 해당 상수가 선언되는 바로 위 쪽에 나오고 있습니다.
세션값으로 모바일을 받거나 폼으로 받거나 또는
is_mobile()함수 리턴값이 참일 때
이 할당됩니다.
그러면 다시 is_mobile()함수를 찾아야 겠지요?
3. is_mobile()함수
is_mobile()함수는
/lib/common.lib.php 파일에서 찾을 수 있습니다.
이 함수는
G5_MOBILE_AGENT상수와 사용자가 접속해서 얻은 user_agent 문자열값을 정규식을 이용하여 비교하는 것을 볼 수 있습니다.
4. G5_MOBILE_AGENT
거의 종점에 이르렀습니다.
이제 G5_MOBILE_AGENT 상수만 찾으면 그누보드5/영카트5에서 사용자 모바일 장치 인지 방법을 다 확인하게 됩니다.
이 상수는
/config.php 파일내에서 선언되었습니다.
그누보드5/영카트5는 위에 있는 코드를 통해 사용자 접속시 모바일(휴대폰/테블릿)로 접속했는지 확인합니다.
등록된 댓글이 없습니다.