By aPOST in 자바스크립트 — 2023년 12월 23일

모바일 기기 체크하기

반응형 웹을 구현할 경우, 또는 모바일 기기용 UI를 구현할 경우 모바일 기기 여부, 또는 종류를 확인하는 것은 필수입니다.

과거처럼 데스크탑용 화면과 모바일용 화면을 따로 만들지 않는 것이 기본 웹 개발의 방향이기 때문에 모바일 기기 체크를 필수적으로 해야 합니다.

모바일 기기체크를 하는 방법은 다양합니다.

대중적으로 많이 사용하는 기기들만 간단하게 체크를 하는 방법부터, 거의 모든 기기에 대응할 수 있도록 세밀하게 체크를 하는 방법까지 있습니다.

간편한 모바일 체크 방법

아이폰, 아이패드, 아이팟, 안드로이드 기기 여부를 확인해 true/false를 반환하는 방식으로 간편하게 구현해 사용할 수 있습니다.

기타 극소수 모바일OS 기기에 대한 대응은 세세하게 되지는 않습니다. 세세한 예외적인 처리까지 하려면 아래 추가적인

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

또는

var isMobile = /Mobi/i.test(window.navigator.userAgent);

또는

var isMobile = navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) ? true : false;

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

모바일 기기를 기준으로 하는 경우 2in1 노트북, 터치 내장 모니터 등에 대응이 안되므로 모바일 기기 판별 방법과 조합해서 사용해야 합니다.

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

반응형 웹 구현을 위한 예외 구분

반응형 웹이 꼭 모바일 기기를 위한 것은 아니고, 다양한 가변 너비의 기기들(타블렛, 노트북 등)에 대응할 수 있도록 만드는 가변형 웹이기 때문에 반드시 모바일 기기가 아니어도 화면 크기를 기준으로 기기로 분류하는 방법으로 대응합니다.

단일 디자인으로 반응형 웹을 구현할 때, 인터넷 익스플로러는 CSS 미디어 쿼리만으로 반응형 웹 대응을 하면 문제가 발생하는 경우가 자주 있습니다.

이런 경우, 너비가 1023px 보다 큰 인터넷 익스플로러 화면은 데스크탑 화면으로 별도로 구분을 해주는 등의 추가 조치를 해야합니다.

function isIEDesktop(){

//인터넷 익스플로러이고 너비가 1023px 보다 크면 - 데스크탑 모드 인터넷 익스플로러

return ( (/MSIE (\d+\.\d+);/.test(navigator.userAgent) || navigator.userAgent.indexOf("Trident/") > -1) && window.outerWidth > 1023 );

}

데스크탑 운영체제인 MS윈도우, 맥OS, 리눅스 여부를 체크해서 아니면 모바일 기기로 간주하고 모바일 화면을 적용합니다.

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

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

function isDesktopOS(){

}

모바일 기기 제조사로 모바일 기기를 상세 구분합니다. 대중적으로 판매되는 모바일 기기 제조사명으로 모바일 기기를 구분해 모바일 기기 제조사명을 반환합니다.

반환 문자열이 있으면 모바일 기기로 처리합니다.

애플 기기나, 삼성 기기를 구분할 필요가 있는 경우 주로 사용합니다.

//모바일 기기 제조사 체크

function getMobileDevice() {

var target = '';

var useragent = navigator.userAgent.toLowerCase();

var devices = ['iphone', 'ipod', 'ipad', 'android', 'blackberry', 'windows ce', 'nokia', 'webos', 'opera mini', 'samsung', 'lg', 'mi', 'sonyericsson',

'opera mobi', 'iemobile', 'huawei', 'oppo', 'mot'];

devices.forEach(function(device){

if(useragent.indexOf(device) >= 0){

target = device;

}

});

return target;

}

정밀 체크 방법

정규표현식으로 모바일 기기 정보를 정밀하게 판별할 수 있습니다.

구형 핸드헬드 기기부터 대부분의 모바일, 또는 타블렛 기기를 판별할 수 있습니다.

//타블렛 포함 모든 모바일 기기 체크

function isLongMobileTablet(){

/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4));

}

//타블렛 제외 모든 모바일 기기 체크

function isLongMobile(){

return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test((navigator.userAgent||navigator.vendor||window.opera).substr(0,4))

}

라이브러리를 이용한 모바일 기기 체크

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

기기 및 브라우저에 대한 상세 정보를 얻을 수 있고, 정확하게 판단하기 때문에 모바일 기기에 대한 상세한 정보 판단이 필요한 웹페이지를 구현할 경우 적합합니다.

https://github.com/hgoebl/mobile-detect.js

cdnjs 클라우드를 연결해 사용 가능

https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.4/mobile-detect.min.js

var md = new MobileDetect(navigator.userAgent);

console.log( md.mobile() ); // 'Samsung'

console.log( md.phone() ); // 'Samsung'

console.log( md.tablet() ); // null