CODEWITHSUNDEEP
javascriptcss
Carlos Daniel
Carlos Daniel

Reputation: 449

How to change a Javascript variable depending on media queries?

Is it possible to change a Javascript variable depending on CSS media queries? for eg. I have a variable in javascript called deviceSize and this is set to desktop by default. And I have 3 different media queries for Desktop Tablet and Mobile. How can I make Javascript know the media query that it is being used?

I want to do this because I want to disable certain features of my game in mobile. My game is a minesweeper game, and it has three difficulty levels. It starts with a 16x16 grid because of deviceSize. So I want javascript to change this variable depending on the media query that CSS detects. So I set deviceSize to mobile and start the game with a 8x8 grid.

Here is my game: https://github.com/sacredcandies/minesweeper

Upvotes: 2

Views: 1294

Answers (2)

Mohammad Zubair
Mohammad Zubair

Reputation: 413

try this to get the width and height 


 function getWidthAndHeight() {
      let width= window.innerWidth;
      let height= window.innerHeight;
}

Upvotes: 1

Joundill
Joundill

Reputation: 7533

Why not just use window.innerWidth to determine the size of the display?

https://www.w3schools.com/jsref/prop_win_innerheight.asp

Upvotes: 0

Related Questions