Is there a way to incorporate both max-width and min-width in a matchMedia query effectively?

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.

Answer №1

Simply merge the media queries like you normally would in CSS:

this.tablet = window.matchMedia('(min-width:767px) and (max-width: 992px)');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determining the installation duration of the React Native screen

Several questions have been asked about this topic, but none of them seem to have a definitive answer. What I am looking to do is calculate the time it takes to navigate to a screen. The timer will start here: navigation.navigate("SomePage") Essentially, ...

What could be the reason for getElementsByClassName failing to work on dynamic HTML elements?

I'm currently in the process of generating multiple dynamic HTML tables and assigning a class to each one. Here's an example: var x = document.createElement("TABLE"); x.className = "table_pos_parts"; //var row = x.insertRow( ...

What is the correct way to insert a new key-value pair into an object within the state of functional components?

Is there a way to dynamically add key-value pairs to the initial state of an empty object in functional components, similar to computed property names in class components? I currently have an initial state of {}. const [choice, setChoice] = useState({}) ...

What is the best way to connect a date and time value with the flip-countdown feature in Vue.js within

I am endeavoring to connect datetime with the flip-countdown component so that it can recognize the date and time for commencing the countdown. The issue I'm facing is related to the inability of the component to properly interpret the time, indicati ...

Vue.js validation using vee-validate encountering an issue with errors

I am attempting to implement validation in Vue.js using vee-validate The version of Vue.js I am working with is 2.6.10 To install, I ran -npm install vee-validate In my main.ts file: import VeeValidate from "vee-validate"; Vue.use(VeeValidate); Howeve ...

Buttons and links with intricate geometries

I am currently developing a web application using Java/JSF and I am interested in finding out about technologies that would allow me to define intricate shapes as clickable buttons or links. Right now, my only option is to split an image into smaller trans ...

What is the process for obtaining the source code for children in React?

Can React extract the source code from children props? Imagine having a component with the following structure... <SomeComp> <Heading>I want to access this code inside the Heading tag</Heading> </SomeComp> How can I retrieve t ...

Is there a way for me to retrieve a variable from outside a function?

I'm trying to access a variable outside of the function in Next.js. I want to retrieve the 'name' from the data object after making an API call. let getDetail = async () => { let body = { code: '12', provider: & ...

Can someone explain the purpose of this code snippet: `const { foo = "bar" } = "baz"`?

I came across this code not too long ago and had trouble finding the answer online, so I'm turning to you for help. The specific code snippet is from a webpack configuration file: const { NODE_ENV = 'production', } = process.env; Appreci ...

Pinchin opts for alternative methods over utilizing the Hammer library for calls

After downloading Hammers.js version-1.0.10, I have been trying to call the 'pinch in' function from the JavaScript file but it is not executing. I suspect there may be a problem with the library as I have tried downloading another one, but the s ...

Guide to positioning a div in the center while implementing animations through transition and transformation using scale

Creating a popup for my React app without relying on external libraries is my current project. I am experimenting with using transition and transform with scale to size the popup dynamically based on screen size and content, then center it on the screen. ...

I'm curious to know how this code is extracting parameters from the website URL. Can someone walk me through the process step by step?

I needed to extract parameters from a URL and started searching online for solutions. I came across a helpful link that provided the information I was looking for: After visiting the website, I found this code snippet: function getUrlVars() { var var ...

What could be causing my div element to remain stationary despite the movement functions I have implemented?

I am attempting to move my div element by using key presses to adjust the CSS attributes of the HTML elements. However, despite implementing the necessary code, the mover refuses to budge and nothing appears when I inspect the elements or their attributes. ...

transferring an EJS object to a Vue function

When working with an Express app, I encountered an issue where I need to pass an object to a Vue method. Below is the snippet of EJS template: <%-item.price%> <button v-on:click="add_to(<%=item%>)" class="float-right">Add...</button& ...

Troubleshooting JavaScript Integration in PHP Scripts

I'm currently working on creating an advertisement switcher that can display different ads based on whether the user is on mobile or desktop. I've tried inserting PHP includes directly into the code, and while it works fine, I'm struggling t ...

What is preventing the content from appearing beside the v-navigation-drawer component?

I am having some trouble setting up a navigation drawer on the left with content on the right. I'm using a template called from a router-view, but for some reason, the "Content here" section is not showing up at all. It seems like it doesn't even ...

Boost Google Pagespeed score by reducing 'Total Blocking Time' in NextJs

I've recently started using NextJS and I'm looking to improve my Google Pagespeed ranking. So far, I've made some good progress in optimizing different metrics. From the screenshot provided, it's clear that the only issue remaining i ...

In Javascript, ensuring a stopping condition for a recursive function that is looping through JSON data

I am having trouble figuring out how to set the break condition for this recursive function. Currently, the function is causing the browser to freeze (seems to be stuck in an endless loop). My goal is to create a series of nested unordered lists based on ...

How can you notice when a DOM element is deleted from the page?

I am in the process of creating a custom directive that will ensure only one element is active at a time. Directive: displayOneAtATime Description: This directive can be applied to a DOM node to guarantee that only one element with this directive can be v ...

Angular.js: automatically select default option based on ID

In my angular.js single page application, I am retrieving initial data from a rest endpoint. The data consists of a list of IDs representing saved models and a tree of options for cascading dropdowns. How can I automatically set the default path in the t ...