I'm currently utilizing the matchMedia API in my JavaScript code to identify viewports, with the goal of reducing DOM manipulations.
Instead of using display: none extensively, I am opting for a v-if directive from Vue to determine when elements are inserted into the DOM.
This is how I've structured it:
resize() {
this.mobile = window.matchMedia('(max-width: 767px)').matches;
this.tablet = window.matchMedia('(max-width: 767px)').matches;
this.desktop = window.matchMedia('(min-width: 992px)').matches;
}
The mobile matchmedia query works well, but I'm unsure about determining the exact tablet size. Is there a way to combine max-width and min-width values in the matchMedia query?
One approach could be:
resize() {
this.mobile = window.matchMedia('(max-width: 767px)').matches;
this.desktop = window.matchMedia('(min-width: 992px)').matches;
this.tablet = !this.mobile && !this.desktop;
}
I'm curious if this setup is correct as it stands.