모바일 전용 페이지 만들기

모바일 전용 페이지를 만들도록 하겠다. 현재의 Mozilla 버전(정보) + OS 정보 + 렌더링 엔진 정보 + 브라우저 이름을 기반으로 모바일 정보가 있는지 검사를 하는 것이다. 

 

var mobileKeyWords = new Array('iPhone','iPod','BlackBerry','Android','Windows CE','LG','MOT','SAMSUNG','SonyEricsson');

for(var word in mobileKeyWords)
{
    if(navigator.userAgent.match(mobileKeyWords[word]) != null)
    {
        location.href="모바일 전용 html 링크";
        break;
    }
}

 

navigator.userAgent.match(mobileKeyWords[word])

navigator.userAgent 함수는 현재의 Mozilla 버전(정보) + OS 정보 + 렌더링 엔진 정보 + 브라우저 이름에 대한 정보를 가지고 있다. 

match 함수는 문자열 안에 인자값이 존재하는지 알려준다. 

예를 들도록 하겠다. 

var str1 = "Hi everyone, My name is OdOp. My age is 24 years old."
var str2 = "Nan. +Infinity. -Infinity."

str1.match("every"); //["every"] 반환
str1.match(24);  //["24"] 반환
str1.match(+24);  //+24 -> 24로 변환 ["24"] 반환
str1.match("not exist");  //null 반환
str2.match("+Infinity");  //+Infinity -> Infinity ["Infinity"] 반환
str2.match("Infinity");  //["Infinity"] 반환

위의 예를 보면 이해할 수 있을 것이라고 생각한다. 문자열 안에서 일치하는 문자열을 찾는 것이다. 

다만, 정수형 같은 것들은 잘 변환을 하여서 찾게 된다. 

 

location.href = "모바일 전용 html 링크"

 

href는 location 객체로 현재 접속 중인 페이지 정보를 갖고 있습니다. 또한, 값을 변경할 수 있기 때문에 다른 페이지로 이동하는 데에도 사용할 수 있습니다. 

위와 같이 코드를 작성하여 접속하는 링크를 변경할 수 있습니다. 

 

간단하게 모바일 전용 html에 접속할 수 있게 만들어 보았습니다. 하시는 프로젝트에 조금이나마 도움이 되었으면 좋겠습니다.