如何根据媒体查询更改 Javascript 变量？

Question

是否可以根据 CSS 媒体查询更改 Javascript 变量？ 例如。 我在 javascript 中有一个名为deviceSize的变量，默认设置为desktop 。 我有 3 种不同的桌面平板电脑和移动媒体查询。 我怎样才能让 Javascript 知道它正在使用的媒体查询？

我想这样做是因为我想在移动设备上禁用游戏的某些功能。 我的游戏是扫雷游戏，它有三个难度级别。 由于deviceSize ，它以 16x16 网格开始。 所以我希望 javascript 根据 CSS 检测到的媒体查询更改此变量。 所以我将deviceSize设置为 mobile 并以 8x8 网格开始游戏。

这是我的游戏： https://github.com/sacredcandies/minesweeper

Answer 1

试试这个来获得宽度和高度

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

Answer 2

为什么不直接使用window.innerWidth来确定显示的大小？

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