브라우저&&모바일 확인 - 바닐라 스크립트(prototype)

글쓴 개요

바닐라 스크립트로 브라우저&&모바일 체크 함수를 구현했습니다.

처음에는 class형식으로 코드를 구현했지만 IE에서는 작동이 안되어 prototype형식으로 리팩토링 했습니다.

 

function detection() {
  //사용방법
  const $check_device = new Check_device(navigator.userAgent.toLowerCase());
  //브라우저만 확인
  console.log("브라우저만 확인 " + $check_device.check_browser());
  //모바일만 확인
  console.log("모바일만 확인 " + $check_device.check_mobile());
  //브라우저 && 모바일 확인
  console.log("브라우저 && 모바일 확인 " + $check_device.check_all());
  console.log("================");
}

function Check_device(varUA) {
  this.varUA = varUA;
}
//브라우저만 확인
Check_device.prototype.check_browser = function (type_param) {
  let type = type_param ? type_param : "";
  if ((navigator.appName == "Netscape" && navigator.userAgent.search("Trident") > -1) || this.varUA.indexOf("msie") > -1) {
    return "is-explore" + type;
  } else if (this.varUA.indexOf("chrome") > -1) {
    if (this.varUA.indexOf("edg") > -1) {
      return "is-edg" + type;
    } else {
      return "is-chrome" + type;
    }
  } else if (this.varUA.indexOf("safari") > -1) {
    if (this.varUA.indexOf("edg") > -1) {
      return "is-edg" + type;
    } else {
      return "is-safari" + type;
    }
  } else if (this.varUA.indexOf("firefox") > -1) {
    return "is-firefox" + type;
  }
};
//모바일만 확인
Check_device.prototype.check_mobile = function () {
  if (this.varUA.indexOf("android") > -1) {
    //안드로이드
    return "is-mobile is-android";
  } else if (this.varUA.indexOf("iphone") > -1 || this.varUA.indexOf("ipad") > -1 || this.varUA.indexOf("mac") > -1) {
    //IOS
    return "is-mobile is-ios";
  } else {
    //WEB
    return "is-web";
  }
};
//브라우저 && 모바일 확인
Check_device.prototype.check_all = function () {
  if (this.varUA.indexOf("android") > -1) {
    //안드로이드
    return this.check_browser(" is-mobile is-android");
  } else if (this.varUA.indexOf("iphone") > -1 || this.varUA.indexOf("ipad") > -1 || this.varUA.indexOf("mac") > -1) {
    //IOS
    return this.check_browser(" is-mobile is-ios");
  } else {
    //WEB
    return this.check_browser(" is-web");
  }
};

window.addEventListener("DOMContentLoaded", detection());

window.addEventListener("resize", function () {
  detection();
});