모바일 브라우저 체크를 위한 자바스크립트

웹사이트를 만들때, PC 브라우저 인가 혹은 모바일 브라우저 인가에 따라 다른 동작을 해줘야하는 경우가 있다. 이는 브라우저가 제공하는 상수값으로 체크할 수 있는데, 크게 두 가지가 상수를 사용할 수 있다. – navigator.userAgent 또는 document.body.clientWidth

1. navigator.userAgent 기기 정보 문자열 비교

navigator.userAgent의 경우, 각 모바일 기기 정보를 문자열로 닮고 있는 상수이다. 모바일 운영체제나 기기명, 회사명 등이 입력되어 있으므로 이를 비교하여 모바일 브라우저인지 알 수 있다.

[alert color=”white”] 체크할 문자열 : iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson|playstation|wii 등 [/alert]

소스코드 예 :

//모바일 브라우저 문자열 체크
var mobileInfo = new Array('Android', 'iPhone', 'iPod', 'BlackBerry', 'Windows CE', 'SAMSUNG', 'LG', 'MOT', 'SonyEricsson');
for (var info in mobileInfo){
    if (navigator.userAgent.match(mobileKeyWords[info]) != null){
        // 모바일 수행
        break;
    }
}

2. document.body.clientWidth 브라우저 가로 사이즈 비교

document.body.clientWidth의 경우, 브라우저의 가로 사이즈로 구분하는 방법이다. 보통 모바일 브라우저인지를 체크하는 이유가 작은 화면에 알맞는 인터페이스를 제공하기 위함인데, 모바일 기기는 계속 새롭게 나오고 탭과 같은 경우는 크기가 작지 않아서 PC 브라우저와 같은 인터페이스 제공하는게 나은 경우가 많다. 이런 경우엔, 기기 정보 문자보다 길이 변수로 체크하는게 알맞을 것이다.

소스코드 예 :

// 모바일 브라우저 가로크기 체크
if (document.body.clientWidth < 800) {
    // 모바일 수행
}

경우에 따라, 위 두 가지 방법을 혼용하면 모바일 브라우저에 알맞은 작업을 수행할 수 있을 것이다.