반응형 (PC,태블릿,모바일) 웹브라우저 환경에서 미지원화면 대체 컨텐츠 노출 대응
모바일 가로모드 미지원시 대체화면이 노출되도록 대응하는 내용입니다.
NotSupport.vue라는 미지원대체화면 컨텐츠 파일생성
App.vue
- 루트 파일인 App.vue에서 NotSupport 연결
<!-- App.vue -->
<template>
<NotSupport v-show="isNotSupport" id="isNotSupport"/>
</template>
<script>
import Vue from 'vue'
import NotSupport from './components/NotSupport.vue';
export default {
name : 'App',
data () {
return {
isNotSupport: false,
}
},
components : {
NotSupport,
},
}
</script>
- 디바이스 감지에 대한 스크립트
<!-- App.vue -->
<script>
export default {
...
methods : {
// 미지원 대체화면
srceenHandler() {
// 모바일 & 태블릿 구분
var mobileTablet = /Android|Mobile|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/;
// 세로모드 구분
var isPortrait = window.innerWidth <= window.innerHeight;
if (navigator.userAgent.match(mobileTablet)) {
if (navigator.userAgent.match(/iPad|Android/i)) {
// 아이패드, 안드로이드 OS
if (window.matchMedia("(min-width: 361px) and (max-width: 600px)").matches) {
if (isPortrait) {
// 세로 모드일때
this.isNotSupport = false;
} else {
// 가로 모드일때
this.isNotSupport = true;
}
} else {
this.isNotSupport = false;
}
} else if(navigator.userAgent.match(/iPhone|iPod/i)) {
// 아이폰
if (isPortrait) {
// 세로 모드일때
this.isNotSupport = false;
} else {
// 가로 모드일때
this.isNotSupport = true;
}
} else {
if (window.matchMedia("(max-width: 767px)").matches) {
if (isPortrait) {
// 세로 모드일때
this.isNotSupport = false;
} else {
// 가로 모드일때
this.isNotSupport = true;
}
} else {
this.isNotSupport = false;
}
}
} else {
// PC
if (window.matchMedia("(max-width: 767px)").matches) {
if (window.innerWidth <= window.innerHeight) {
// 세로 모드일때
this.isNotSupport = false;
} else {
// 가로 모드일때
this.isNotSupport = true;
}
} else {
this.isNotSupport = false;
}
}
},
}
}
</script>
- 각 해당되는 라이프사이클에 screenHandler 이벤트 등록
// app.vue
export default {
name : 'App',
data () {
return {
isNotSupport: false,
}
},
components : {
NotSupport,
},
beforeCreate() {
window.addEventListener('load', this.srceenHandler);
},
created: function() {
window.addEventListener('load', this.srceenHandler);
window.addEventListener('resize', this.srceenHandler);
},
mounted() {
window.addEventListener('resize', this.srceenHandler);
},
beforeDestroy() {
// 컴포넌트가 제거되기 직전 이벤트리스너 해제
window.removeEventListener('resize', this.srceenHandler);
},
}
