如何解决除非调整窗口大小,否则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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。