个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试将一组简单的媒体查询从 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/
24
4
0
我有以下数据框 data<-data.frame(ID=c("a", "b", "c", "d"), zeros=c(3,2,5,4), ones=c(1,1,2,1)) ID zeros on
我正在寻找以下功能: Applicative f => f (f a) -> f a Hoogle给我看join : >:t join join :: Monad m => m (m a) -> m
我需要制作一个在 HomePod 上运行的应用程序。可能吗？ 最佳答案 目前无法为 HomePod 开发应用程序。 关于ios - 申请 HomePod，我们在Stack Overflow上找到一个类
我正在使用 VSTS 2008 + .Net 3.5 + C# 开发 Windows 窗体应用程序。我的困惑是，似乎 Application.Exit 不会强制应用程序终止？如果不是，我应该调用哪个方
在黎巴嫩，我们没有邮政编码。 当你申请google adsense时，你必须填写你的邮政编码。就我而言，我放了任何东西，因为我没有邮政编码。 谷歌一直拒绝我的申请，有人说是因为我住在黎巴嫩，谷歌不想与
我们使用 HTTP Auth 将 gradle 文件存储在 http 服务器上。我以为我可以通过 应用这些文件 申请自:"https://username:password@host.com/file
无法应用脉冲，在xcode6.1 osx操场上出现错误“找不到成员applyimpulse”。 码: func spawnSand() { let sand: SKSpriteNode = S
我拥有一个页面 我拥有一个应用程序 我在页面上添加了应用程序(即使它没有出现在页面的应用程序列表中:/) 是否可以使用带有我的应用程序 token 的 GraphAPI 从应用程序访问页面的完整提要和
我正在尝试使用 apply 函数在相对较小(~600 行)的数据框子集上创建一个新列，它可以工作，但速度很慢，因为 apply 函数计算量大，我无法创建这个黑盒功能更快/更简单。 但是，这个黑盒函数返
我从一家公司获得了证书，并获得了 .cer 文件，但是我无法从 .cer 文件中进行选择，但它需要一个 .pfx。有谁知道如何使用 .cer 文件签署我的 clickonce 应用程序？ 最佳答案 您
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a softwa
我会尽量保持简短，但我需要一些建议。 我所在的团队正在并行开发适用于 android、iphone 和 wp7 的应用程序。我们有一个设计团队，可以为所有三个平台提出一个单一的设计。 最新应用程序的设
如何将 SSL HTTPS 应用于我的 PHP 登录系统。我的登录系统是基本的，下面是它的运行方式: 获取 session 和用户然后检查其是否正确。我需要某种 SSL/HTTPS 检查。 有什么例子
我正在启动一个 child 监护应用程序。这将主要涉及记录发送和接收的 SMS 消息以及记录 parent 可能感兴趣的其他 Activity 。拥有类似访问控制列表的东西也很好。 现在，据我所知:
我有一个 OTP 应用程序。到目前为止，我有两个配置文件:rebar.config 和config/vm.args，后者在前者中被引用:{vm_args, "配置/vm.args". 在较大的文档中:
这是一个足够简单的问题，令我感到惊讶的是，我找不到任何对之前问过它的人的引用。和this不一样，也不受 this discussion 的保护. 我有一个 4-d 矩阵(尺寸为 16x10x15x39
我是 Pyspark 的菜鸟，我假装玩了几个函数来更好地理解如何在更现实的场景中使用它们。有一段时间，我尝试将特定函数应用于 RDD 中的每个数字。我的问题基本上是，当我尝试打印从 RDD 中抓取的内
我已经集成了apply with monster在我的应用程序中 问题 在特别申请REQUEST交付方式后，我没有收到怪物的回复 注意 它适用于 EMAIL 传送方式 请求传递方法的脚本 如有任
这是一个非常简单的问题，我已经阅读了许多建议的解决方案，但我仍然无法让 puppet apply 导入 git::config 类。这是我的文件设置: 我通过nodes.pp导入git模块: #/et
我想知道这是否可能。 我有一个网页，我想关注表单中第一个启用的可见字段。第一个字段可以是输入字段或选择字段。我尝试过(使用 JQuery)以下格式 input,select:visible:enabl
我是一名优秀的程序员,十分优秀！