🌐 웹페이지 접속 기기(모바일 / 태블릿 / PC) 구분하기

웹페이지 접속 기기 종류 체크

요즘은 반응형 웹이 기본인 시대라, css의 @media screen을 통해 PC와 모바일 화면을 다르게 설정 한다. 하지만 독자적인 모바일 기기용 UI를 구현할 경우, 홈페이지에 접속하는 기기가 모바일 기기 여부 또는 안드로이드 인지 아이폰인지 종류를 확인을 해야하는 경우가 생긴다.

이밖에 모바일 화면에선 일부 css나 자바스크립트를 로드하지 않게 하여 성능 최적화를 노릴때도 모바일 기기 감지가 필수적이다. (Detecting a mobile browser)

---

모바일 / PC 구분하기

​자바스크립트에서 접속자의 브라우저 정보 및 디바이스 정보를 가지고있는 User-Agent 라는 객체를 사용하여 아이폰, 아이패드, 아이팟, 안드로이드 기기 여부를 확인해 true/false를 반환하는 방식으로 간편하게 구현할 수 있다.

useragent란, 정의하자면 "브라우저에 대한 식별 코드" 라고 생각하면 되며 사람으로 생각하면 "주민 등록증" 과 같은 것이다.
식별되는 것은 컴퓨터(단말기)에 대한 OS 정보, 브라우저 버전, 레이아웃 엔진 종류 등 담아서 항상 서버와 통신할 때 접속자 정보를 뜻하는 것이라고 생각하면 된다.

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); // 안드로이드 아이폰을 검사해 체크

// 또는 

var isMobile = /Mobi/i.test(window.navigator.userAgent); // "Mobi" 가 User agent에 포함되어 있으면 모바일

태블릿을 구분하는 로직은 따로 있다. 해당 코드는 태블릿을 구분하지는 않는다.
(태블릿만 구분하는 로직은 아래에 추가 포스팅 했다.)

 

다양한 프로그래밍 언어 지원

페이지에는, 다양한 언어로 구현된 모바일 기기를 감지할 수 있는 소스 코드가 포함되어 있다.

매우 긴 정규식을 사용해서 다양한 조건에 해당하는 기기에서 접속하면 true 혹은 false를 반환하는 함수가 구현되어 있다.

Detect Mobile Browsers - Open source mobile phone detection

다운을 받으면 함수 실행식 코드가 담긴 텍스트 파일을 내려받는데, 이를 그대로 복사해서 실행시키면, 모바일일 경우 http://detectmobilebrowser.com/mobile 로 날아가게 된다. 해당 코드의 if() 문 부분만 따와 적절하게 커스텀해서 사용하면 된다.

 

모바일에서만 CSS 파일 로드하기

PC가 아닌 모바일 기기에서만 특정 css 파일을 로드하도록 지정함으로써 리소스 최적화를 노릴 수 있다.

🚀 모바일 / 태블릿 에서만 CSS 파일 로드 최적화

---

안드로이드 / 아이폰 구분하기

하이브리드 및 웹 앱을 만들다보면 Android 와 IOS를 구분해야하는 부분들이 생긴다.

다음은 User-Agent를 통해 얻어낸 Android, IOS 각 기기의 정보이다.

• Android
  • Mozilla/5.0 (Linux; Android 9; SM-G955N Build/PPR1.180610.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/75.0.3770.89 Mobile Safari/537.36
• IOS
  • Mozilla/5.0 (iPhone; CPU iPhone OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/71.0.3758.78 Mobile/15E148 Safari/605.1

​정보를 보면 알 수 있듯이 안드로이드폰에서는 Android, 아이폰에서는 iPhone이라는 문자열을 가지고 있다.

이를 통해서 문자열 검색으로 아이폰과 안드로이드폰을 구분할 수 있다.

var varUA = navigator.userAgent.toLowerCase(); //userAgent 값 얻기

if ( varUA.indexOf('android') > -1) {
    //안드로이드
} else if ( varUA.indexOf("iphone") > -1 || varUA.indexOf("ipad") > -1 ||varUA.indexOf("ipod") > -1 ) {
    //IOS
} else {
    //아이폰, 안드로이드 외 모바일
}

---

터치 기기 구분하기

터치 대응 웹 UI를 제작하는 경우 터치 가능한 장치인지 확인하는 방법으로 모바일 기기, 또는 터치 대응 기기 구분을 해야한다.

const isTouchDevice = (navigator.maxTouchPoints || 'ontouchstart' in document.documentElement);

---

모바일 / 태블릿 구분하기

 

mobile-detect 라이브러리

이전에 PHP로 구현된 모바일 기기 체크 라이브러리의 자바스크립트 포팅 버전 이다.

기기 및 브라우저에 대한 상세 정보를 얻을 수 있고, 또한 정확도 역시 높아서 매우 유용한 라이브러리다.

mobile-detect

$ npm install mobile-detect --save

<!-- cdn 다운 링크 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.5/mobile-detect.min.js"></script>

만일 userAgent 정보가 다음과 같다고 하면,

• Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i Build/4.1.A.0.562) 
  AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

var md = new MobileDetect(navigator.userAgent);

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

코드에서 볼수 있듯이, 다양한 정보를 취득할수있는 api 메소드를 지원해줘 요긴하게 쓰일수 있다.

---

운영체제 구분하기

홈페이지에 접속한 운영체제가 MS윈도우, 맥OS, 리눅스 인지 체크한다. 이를 이용해서 시스템OS가 아니면 모바일로 간주하는 방법도 사용은 할 수있다.

구글 넥서스5 같은 일부 특수한 모바일 기기는 "linux", 또는 "null"을 반환하므로 주의해야 한다.

//데스크탑 운영체제 체크

function isDesktopOS(){
	return ( 'win16|win32|win64|windows|mac|macintel|linux|freebsd|openbsd|sunos'.indexOf(navigator.platform.toLowerCase()) >= 0 );
}