VUE 기반 장치가 PC인지 모바일 포트인지 판단

실제 개발 과정에서 자주 발생하는 수요는 현재 웹 페이지에 로그인한 장치가 PC인지 이동인지를 판단하고 PC 측과 모바일 측이 서로 다른 웹 내용을 표시하도록 요구하는 것이다.
그러면 현재 로그인 장치에 대한 판단이 필요합니다.
navigator를 사용합니다.userAgent 문자열 체크
저는 PC 쪽에서 개발하고 모바일 쪽을 만들어야 한다는 요구를 받았습니다. 그리고 모바일 쪽은 한 페이지밖에 없어서 폴더에 통일적으로 놓았습니다.
일단 앱에서.vue 파일에서 현재 장치가 pc단인지 이동단인지 판단합니다.

methods: {
 //  
 isMobile() {
  let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
  return flag;
  }
},
mounted: {
 if(this.isMobile) {
  alert(" ");
  this.$router.replace('/pc_index');
 }else {
  alert("pc ");
  this.$router.replace('/m_index');
 }
}

다음은 이 방법을 약간 소개하는데, 그중에서navigator가 사용되었다.userAgent .
이 방법은 브라우저가 http 요청을 보낼 때 사용자 프록시 헤더의 값을 표시하는 읽기 전용 문자열을 되돌려줍니다.예:

<script>
 document.write(" ：" + navigator.userAgent)
</script>

// pc ：
 ： Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36
//  ：
 ： Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

.match 방법은 문자열에서 지정한 값을 검색하거나 정규 표현식의 일치를 찾을 수 있습니다. 반환 값은 검색된 값입니다.
비슷한 방법은 index Of (), lase Index Of () 도 있지만, 이 두 가지 방법은 일치하는 값의 위치를 되돌려줍니다.
그래서 판단 방법에 쓰인다.match 방법은 모든 이동단 모델과 일치합니다. 마지막으로 추가된/i는 대소문자를 구분하지 않습니다.
윈도우를 사용합니다.matchMedia() 검사
매체의 조회 방식을 이용해 판단하는 것이다.
window.matchMedia 방법은 지정한 미디어 검색 문자열이 해석된 결과를 나타내는 새로운 미디어QueryList 대상을 되돌려줍니다.예:
var result = window.matchMedia("(min-width: 400px)").matches;
console.log(result)//true
window.matchMedia 방법은 두 개의 매개 변수를 되돌려줍니다. 하나는 미디어입니다. 바로 조회의 문장 내용입니다.다른 하나는 matches입니다. 되돌아오는 결과입니다. boolean 형식입니다.
현재 장치의 뷰포트 너비에 따라 이동단 장치인지 여부를 판단합니다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.