我正在尝试将一组简单的媒体查询从 css 改编为 javascript。 css 定义按预期工作，但是，javascript 代码没有。
代码块如下所示:
window.matchMedia("(min-width: 401px) and (max-width: 600px)")
.addListener( function() {
console.log("CALLBACK (max-width: 600px)");
document.body.style.background = "red";
});
根据宽度，我更改文档颜色。当我改变窗口的大小时，似乎调用了两个回调函数:一个匹配前一个宽度，一个匹配当前宽度。
我希望只调用与当前宽度匹配的那个。
例如，当我将浏览器大小从 window.innerWidth 1871 更改为 window.innerWidth 700 时，会发生以下情况:
window.innerWidth: 1871
CALLBACK (max-width: 800px)
CALLBACK (min-width: 801px)
window.innerWidth: 700
并且应用了 min-width 801px 的回调。
我做错了什么？
完整的测试代码在这里:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onresize = afterWindowResize;
function afterWindowResize(){
showSize();
}
function x(){
showSize();
window.matchMedia("(max-width: 400px)")
.addListener( function() {
console.log("CALLBACK (max-width: 400px)");
document.body.style.background = "green";
});
window.matchMedia("(min-width: 401px) and (max-width: 600px)")
.addListener( function() {
console.log("CALLBACK (max-width: 600px)");
document.body.style.background = "red";
});
window.matchMedia("(min-width: 601px) and (max-width: 800px)")
.addListener( function() {
console.log("CALLBACK (max-width: 800px)");
document.body.style.background = "blue";
});
window.matchMedia("(min-width: 801px)")
.addListener( function() {
console.log("CALLBACK (min-width: 801px)");
document.body.style.background = "gray";
});
}
function showSize(){
console.log("window.innerWidth: " + window.innerWidth);
}
</script>
</head>
<body onload="x()">
</body>
</html>
最佳答案
如果你传递事件然后使用matches它会正常工作
window.matchMedia("...").addListener( function(e) {
if (e.matches) {
// do something
}
}
或者您也应该能够使用 this，例如if (this.matches) {...}
堆栈片段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onresize = afterWindowResize;
function afterWindowResize() {
showSize();
}
function x() {
showSize();
window.matchMedia("(max-width: 400px)")
.addListener(function(e) {
if (e.matches) {
console.log("CALLBACK (max-width: 400px)");
document.body.style.background = "green";
}
});
window.matchMedia("(min-width: 401px) and (max-width: 600px)")
.addListener(function(e) {
if (e.matches) {
console.log("CALLBACK (max-width: 600px)");
document.body.style.background = "red";
}
});
window.matchMedia("(min-width: 601px) and (max-width: 800px)")
.addListener(function(e) {
if (e.matches) {
console.log("CALLBACK (max-width: 800px)");
document.body.style.background = "blue";
}
});
window.matchMedia("(min-width: 801px)")
.addListener(function(e) {
if (e.matches) {
console.log("CALLBACK (min-width: 801px)");
document.body.style.background = "gray";
}
});
}
function showSize() {
console.log("window.innerWidth: " + window.innerWidth);
}
</script>
</head>
<body onload="x()">
</body>
</html>关于javascript - 为什么不申请时会调用 window.matchMedia 回调？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49984781/