2

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

3

2 Answers 2

1

try this to get the width and height


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

1
  • This doesn't answer the question... there are more direct answers, as noted in the comments above.
    – Brad
    May 27, 2020 at 23:05
0

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

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

2
  • Not all media queries are pixel based. It would be better to match the media query itself, to be consistent with the CSS.
    – Brad
    May 27, 2020 at 23:05
  • OP's variable is named deviceSize, which would suggest it's the size of the device he's looking at with his media query.
    – Joundill
    May 27, 2020 at 23:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.