[Javascript] iPad|Andorid|iPhone User-Agent확인 및 구분

이번에 아이패드 전용 앱에서 하이브리 형식으로 서비스를 개발하는데, 네이티브와 연동을 해야하는 부분이 있어 Bridge개발을 해 놓고 보니, 웬걸  ~ 로그인 페이지는 또 서버(Back-end) 단에서 UI를 만들둔 사실을 뒤늦게 깨닫게 되었다. 바보같이. 

 

결국 혼자서 북치고 장구치고 다해야하는 상황이 발생했는데 
아이디/비밀번호를 넣고 로그인 하는 시점에 앱 영역에 아이디/비밀번호를 저장해야 하는 상황이라 안드로이드/아이패드를 구분하기 위해 User-Agent를 뒤졌더니, 안드로이드는 별 문제가 없고 아이패드의 경우 "iPad"라는 문구가 사라지고 없다. 

 

인터넷 검색을 해보니 iOS13부터 바뀐거라는데, 나도 익히 알고는 있었지만, 정작 iPad 앱 개발을 할 일이 없고 더군더나 네이티브만 작업을 하니 웹쪽은 신경쓸 필요가 없다가 이번에 웹에서 로그인 하는 페이지에 분기 로직을 넣을려고 보니 필요하게 되었다. 

 

다음은 완전한 소스 코드다. 

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i) == null ? false : true;
    },
    iOS: function() {
        return ((navigator.userAgent.match(/iPhone|iPad|iPod/i) == null) && (navigator.maxTouchPoints == 0)) ? false : true;
    },
    any: function() {
        return (isMobile.Android() || isMobile.iOS());
    }
    //Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
};

//입력된 링크를 전달하는 bridge function
function outLink(link) {
    //alert(navigator.userAgent);
    if(isMobile.any) {
        if(isMobile.Android()) {
            note.webToApp(JSON.stringify(link));
        } else if(isMobile.iOS()) {
            window.webkit.messageHandlers.note.postMessage(link)
        }
    }
}

 

가장 중요한 부분은 navigator.maxTouchPoints == 0 이부분이다. 

실제 테스트를 해보니, 맥북의 크롬에서는 navigator.maxTouchPoints == 0 이렇게 나오고 아이패드로 접속한 서비스 페이지에서는 navigator.maxTouchPoints == 5로 나오고 있다. 

스크린 터치가 가능한지 여부에 대한 값을 체크하면서 아이패드인지를 구분하는 코드인데 대부분 이슈가 정리된 내용이긴 하지만, 

또 언제 이게 써여질지 몰라 정리한다.