VUE 기반 장치가 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');
}
}이 방법은 브라우저가 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비슷한 방법은 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 형식입니다.
현재 장치의 뷰포트 너비에 따라 이동단 장치인지 여부를 판단합니다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
VUE 기반 장치가 PC인지 모바일 포트인지 판단실제 개발 과정에서 자주 발생하는 수요는 현재 웹 페이지에 로그인한 장치가 PC인지 이동인지를 판단하고 PC 측과 모바일 측이 서로 다른 웹 내용을 표시하도록 요구하는 것이다. 그러면 현재 로그인 장치에 대한 판단이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
