除非调整窗口大小，否则 matchMedia 不起作用答案

【问题标题】：matchMedia doesnt work unless window is resized除非调整窗口大小，否则 matchMedia 不起作用
【发布时间】：2020-08-23 16:24:03
【问题描述】：

我正在尝试使用 window.matchMedia 事件侦听器来检测用户是否在触摸设备上。但我似乎只是在调整 chrome DevTools 窗口大小时才激活，并没有实际检测它是否是触摸设备（例如，在我的像素 3a 上）。

这是我用于事件监听器的代码

if (matchMedia) {
        let mql = window.matchMedia('(pointer: fine)');
        mql.addListener(touchChange)
    }

及其运行的功能

function touchChange (event) {
if (event.matches) {
    touchcontrols = true;
    console.log("Touch Controls");
    console.log(window.innerWidth);
    document.getElementById("lives").innerHTML = "Touch Events!";
}

}

【问题讨论】：

标签： javascript google-chrome-devtools addeventlistener matchmedia

【解决方案1】：

如果你只是想看看它是否匹配一次就可以使用：

let matches = window.matchMedia('(pointer: fine)').matches;

window.matchMedia 返回一个带有 matches 属性的对象，该属性指示它当前是否与您的查询匹配，并返回一个 addListener 来注册一个回调，该回调将被调用以响应媒体查询状态的变化。

【讨论】：

您介意扩展您的答案或提供链接吗？我不完全理解抱歉。