Fix isMobile detection
This commit is contained in:
11
src/Spot.vue
11
src/Spot.vue
@@ -34,6 +34,10 @@ export default {
|
||||
},
|
||||
inject: ['appConfig'],
|
||||
created() {
|
||||
this.mobileMediaQuery = window.matchMedia('only screen and (max-width: 800px)');
|
||||
this.mobileMediaQuery.addEventListener('change', this.updateMobile);
|
||||
this.updateMobile();
|
||||
|
||||
//Set initial page
|
||||
let asInitHash = this.getBrowserHash();
|
||||
if(!asInitHash.page) asInitHash.page = this.consts.default_page;
|
||||
@@ -42,8 +46,6 @@ export default {
|
||||
mounted() {
|
||||
//Catch browser hash change
|
||||
window.addEventListener('hashchange', this.onBrowserHashChange);
|
||||
window.addEventListener('resize', this.updateMobile);
|
||||
this.updateMobile();
|
||||
},
|
||||
watch: {
|
||||
hashSnapshot(jNewHash, jOldHash) {
|
||||
@@ -61,7 +63,7 @@ export default {
|
||||
return this.mobile;
|
||||
},
|
||||
updateMobile() {
|
||||
this.mobile = getComputedStyle(this.$refs.mobile).display !== 'none';
|
||||
this.mobile = this.mobileMediaQuery.matches;
|
||||
},
|
||||
setPageTitle(sTitle) {
|
||||
document.title = this.consts.title + ' - ' + sTitle.trim();
|
||||
@@ -88,7 +90,7 @@ export default {
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('hashchange', this.onBrowserHashChange);
|
||||
window.removeEventListener('resize', this.updateMobile);
|
||||
this.mobileMediaQuery.removeEventListener('change', this.updateMobile);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -96,5 +98,4 @@ export default {
|
||||
<div id="main">
|
||||
<component :is="route" />
|
||||
</div>
|
||||
<div id="mobile" ref="mobile"></div>
|
||||
</template>
|
||||
|
||||
@@ -147,9 +147,3 @@ h2 {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
|
||||
#mobile {
|
||||
display: none;
|
||||
}
|
||||
@@ -67,7 +67,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
#mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user