How to change a Javascript variable depending on media queries?

Question

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

I wouldn't think this would involve media queries. You should be able to add a resize event to the window, and on resize check the width of the page to determine what the deviceSize should be. — Taplar
– Taplar, Commented May 27, 2020 at 22:52
You can relay on developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia — G-Cyrillus
– G-Cyrillus, Commented May 27, 2020 at 22:57
Make your acquaintance with w3schools: How TO - Media Queries with JavaScript — Rene van der Lende
– Rene van der Lende, Commented May 28, 2020 at 1:31

Mohammad Zubair · Accepted Answer · 2020-05-27 23:02:15Z

1

try this to get the width and height


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

answered May 27, 2020 at 23:02

Mohammad Zubair

4134 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brad Over a year ago

This doesn't answer the question... there are more direct answers, as noted in the comments above.

Joundill · Accepted Answer · 2020-05-27 22:57:58Z

0

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

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

answered May 27, 2020 at 22:57

Joundill

7,84113 gold badges40 silver badges54 bronze badges

2 Comments

Brad Over a year ago

Not all media queries are pixel based. It would be better to match the media query itself, to be consistent with the CSS.

Joundill Over a year ago

OP's variable is named deviceSize, which would suggest it's the size of the device he's looking at with his media query.

Collectives™ on Stack Overflow

How to change a Javascript variable depending on media queries?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related