diff --git a/src/Spot.vue b/src/Spot.vue index 75ac31b..5841690 100644 --- a/src/Spot.vue +++ b/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); } } @@ -96,5 +98,4 @@ export default {
-
diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 4ef63e6..3c09daf 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -147,9 +147,3 @@ h2 { } } } - -/* Mobile */ - -#mobile { - display: none; -} \ No newline at end of file diff --git a/src/styles/_mobile.scss b/src/styles/_mobile.scss index c7e6fcf..7c3ddf5 100644 --- a/src/styles/_mobile.scss +++ b/src/styles/_mobile.scss @@ -67,7 +67,4 @@ } } - #mobile { - display: block; - } -} \ No newline at end of file +}