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

问题描述

我正在尝试使用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!";
}

}

解决方法

如果您只想查看它是否匹配，可以使用：

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

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

有关此内容的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener