자바스크립트에서 웹, 모바일 환경을 어떻게 알 수 있을까요?

Question

웹 브라우저와 모바일 브라우저에서 다르게 동작해야 하는 부분이 있는데 이걸 어떤식으로 구분을 지어야 할까요?

혹시 알 수 있는 방법이 있다면 알려주세요~!

빠른너구리257 · Accepted Answer

예제 올립니다.var broswer = {};
 
broswer.isMobile = function() {
    var tempUser = navigator.userAgent;
    var isMobile = false;
 
    // userAgent 값에 iPhone, iPad, iPot, Android 라는 문자열이 하나라도 존재한다면 모바일로 간주됨.
    if (tempUser.indexOf("iPhone") > 0 || tempUser.indexOf("iPad") > 0
            || tempUser.indexOf("iPot") > 0 || tempUser.indexOf("Android") > 0) {
        isMobile = true;
    }
    return isMobile;
};
 
broswer.isMobileChkPrint = function(isMobileChk) {
    var result = "";
    if (isMobileChk) {
        result = "모바일 웹 브라우저로 접속했습니다.";
    } else {
        result = "PC용 웹 브라우저로 접속했습니다.";
    }
    return result;
};
 
//브라우저의 종류 확인
broswer.getBroswerName = function() {
    //userAgent값을 모두 소문자로 변환하여 변수에 대입
    var agt = navigator.userAgent.toLowerCase();
    
    if(agt.indexOf("chrome") != -1) {
        return 'Chrome';
    }
    else if(agt.indexOf("opera") != -1) {
        return 'Opera';
    }
    else if(agt.indexOf("firefox") != -1) {
        return 'Firefox';
    }
    else if(agt.indexOf("safari") != -1) {
        return 'Safari';
    }
    else if(agt.indexOf("whale") != -1) {
        return 'Whale';
    }
    //msie는 Expolrer 11d이전 버전, trident는 Explorer 11버전
    else if(agt.indexOf("msie") != -1 || agt.indexOf("trident") != -1) {
        return 'Internet Explorer';
    }
    else if(agt.indexOf("netscape") != -1) {
        return 'Netscape';
    }
    else {
        return 'Unknown';
    }
};

터프한곰123 · Answer

안녕하세요. 질문자님 답변남겨드립니다.var filter = "win16|win32|win64|mac|macintel";

if ( navigator.platform ) {

if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) {

//mobile

alert('mobile 접속');

} else {

//pc

alert('pc 접속');

} 로 사용할수 있습니다.어떤 사이트를 제작하는지 모르겠지만 크리티컬한 부분을 제어하는데는 비추합니다. 요츰 워낙 개발자도구 이용하시는 사람들이 많기에 back단에서 미리 체크하여 제어하는것이 좋습니다.감사합니다.

멋진숲제비36 · Answer

navigator.userAgent 정보를 이용하세요. 문자열 매칭여부를 확인하면 됩니다. chrome 브라우저의 개발자도구 - console에서 navigator.userAgent를 확인해보시면 다음과 같은 정보를 확인할 수 있습니다.navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36"개발자 도구 왼쪽 상단의 'Toggle Device toolbar'를 클릭해 모바일 브라우저로 변경한 후 다시 실행해보면 다음과 같이 다른 결과를 보여줄 것입니다.navigator.userAgent
"Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Mobile Safari/537.36"navigator.userAgent 의 문자열 중에서 mobile을 나타낼만한 단어들을 찾고 그 문자가 userAgent 값에 포함되어 있는지 여부로 구분하시면 됩니다.

우람한비버183 · Answer

크게 두가지 방법이 있는데 userAgent 를 이용하는 방법과 screenSize 를 이용한 방법입니다. 화면사이즈에 따라 동작방식이 변경되는 경우는 screenSize 로 구분하고, 그외의 경우는 userAgent를 이용해 구분합니다.screenSize 를 이용한 방법은 모바일 기기에 따라 사이즈가 다르고, portrait 와 landscape 일 때 각각 사이즈가 다르게 측정되기 때문에 개발자가 사이즈에 기준을 잡아야 합니다./* screenSize 를 이용해 구분하는 방법 */
function isMobile () {
  return window.screen.availWidth <= 414  // iphone 8 plus 기준으로 가로폭사이즈가 414입니다.
}screenSize를 이용한 방법보다는 userAgent 를 이용한 방법이 더 많이 상요됩니다. userAgent 에는 브라우저(http client)의 다양한 일부 정보들이 포함되어 있고, 브라우저마다 몇 식별자들이 들어있습니다. userAgent의 문자열이 관례적으로 표기하는 방식이 있으나 강제적인 방식이 아니기 (아주)일부 브라우저에서는 적용되지 않을 수 있음을 알고 계셔야 합니다./* userAgent 를 이용해 구분하는 법  */
function isMobile () {
  const regexp = /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i
  return regexp.test(window.navigator.userAgent)
}

생활꿀팁

생활꿀팁

자바스크립트에서 웹, 모바일 환경을 어떻게 알 수 있을까요?