Javascript 除非调整窗口大小,否则matchMedia无法工作
我正在尝试使用window.matchMedia事件侦听器检测用户是否在触摸设备上。但im似乎只是在调整chrome DevTools窗口的大小时才被激活,而实际上并没有检测到它是否是触摸设备(例如,在我的像素3a上) 下面是我用于事件侦听器的代码Javascript 除非调整窗口大小,否则matchMedia无法工作,javascript,google-chrome-devtools,addeventlistener,matchmedia,Javascript,Google Chrome Devtools,Addeventlistener,Matchmedia,我正在尝试使用window.matchMedia事件侦听器检测用户是否在触摸设备上。但im似乎只是在调整chrome DevTools窗口的大小时才被激活,而实际上并没有检测到它是否是触摸设备(例如,在我的像素3a上) 下面是我用于事件侦听器的代码 if (matchMedia) { let mql = window.matchMedia('(pointer: fine)'); mql.addListener(touchChange) } 以及它运行的函
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
以注册回调,该回调将被调用以响应媒体查询状态的更改
更多信息:您是否介意扩展您的答案或提供链接?我不完全明白对不起。