안드로이드(Android), IOS 디바이스 구분하기

 

 

안드로이드(Android)와 IOS는 태어난 환경이 서로 다르기 때문에 같은 코드와 CSS 속성이 브라우저 엔진에서 다르게 랜더링 되어 화면에 우리가 예측한 값과 다르게 도출되는 경우가 발생합니다.

이 경우 사용자의 유저가 접속한 디바이스가 무엇인지 구분하여 안드로이드 유저에게는 안드로이드 화면이 노출되고 아이폰 유저에게는 아이폰 화면이 노출된다면 우리가 원하는 최적의 결과를 얻을 수 있습니다. 이 방법을 적용하기 위해선 사용자가 접속한 OS가 무엇인지 확인을 해야 합니다. 

 

아래 스크립트를 적용하면 사용자가 접속한 OS에 따라 안드로이드, IOS, 그 외 세가지로 구분하여 body 태그에 해당 Class를 붙여주는 코드입니다. 

 

감사합니다.

function deviceModel(){
    let currentOS;
    const mobile = (/iphone|ipad|ipod|android/i.test( navigator.userAgent.toLowerCase() ));

    if (mobile)
    {
        const userAgent = navigator.userAgent.toLowerCase();
        if (userAgent.search("android") > -1) {
            currentOS = "android";

        // 안드로이드 os 버젼 체크
        const deviceAgent = 'Mozilla/5.0 (Linux; U; Android 2.2.1; en-us; device Build/FRG83) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Safari/533.1';
        androidversion = parseFloat(deviceAgent.match(/Android\s+([\d\.]+)/)[1]);
        document.querySelector('body').getAttribute('data-device', androidversion);

        } else if ((userAgent.search("iphone") > -1) || (userAgent.search("ipod") > -1) || (userAgent.search("ipad") > -1)) {
            currentOS = "ios";
        } else { currentOS = "else"; }
    }
    else  {  currentOS = "nomobile"; }

    document.querySelector('body').classList.add(currentOS);
}
deviceModel();