问题标签 [matchmedia]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
803 浏览

javascript - 将参数传递给 matchmedia addListener 回调函数

我正在构建一个插件,并且为了打开/关闭某些行为,我正在使用 matchMedia 函数。但是在回调函数中,我需要传递一个参数来保留对此的正确引用。但是,当我尝试将参数传递给我的回调函数时,它说我的整个 addListener 回调函数是未定义的。当我尝试将它绑定到回调函数时,这同样适用。

关于addListener,我肯定缺少一些非常明显的东西,所以现在我只包含我的代码的一个非功能示例:

因此,我还尝试通过向该函数添加第二个参数然后将其传递给该函数,从而将对此的引用传递给我的 mediaQueryCheck 函数:

但无济于事..有什么想法吗?提前致谢!

0 投票
2 回答
2800 浏览

javascript - addListener 如何与 matchmedia API 一起使用?

matchMedia("(min-width: 500px)").addListener(foo);做什么?这就是addListener()函数在这里的作用?foo()当视口宽度发生变化时它会执行该功能吗?

0 投票
1 回答
1308 浏览

javascript - 自动为 PDF 添加密码

我目前正在使用此代码在打印对话框中获得警报

一切正常,在打印对话框显示之前和之后我都会收到警报。

现在我的问题是,或者我想做的是自动使用密码保护保存的 pdf,就像我将在脚本中设置一个随机密码一样,pdf 将自动使用该密码保护。

这甚至可能吗?先感谢您。

0 投票
2 回答
942 浏览

webpack - 使用 Chai 测试:添加 react-slick 会引发错误 - matchMedia 不存在

将 react-slick 滑块添加到我的 webpack 项目后,我的 chai 测试开始失败

此处推荐的滑块组件的作者对此问题的唯一修复是开玩笑。我已经在我的环境中尝试过,但它没有用。

0 投票
1 回答
33 浏览

jquery - 需要帮助... Bootstrap Button / matchMedia / removeClass

在网站中,我使用菜单。如果您使用 PC 调用该页面,菜单应该是完全可见的。如果您使用手机调用该页面,则应该只显示一个按钮,单击该按钮会打开菜单。

在 PC 版本中一切正常。菜单可见,按钮隐藏。

使用手机呼叫时,该按钮可见。然而,菜单也被折叠了。

这是代码:

0 投票
1 回答
1085 浏览

javascript - Safari window.matchMedia 处理程序未调用

doSomethingFunc当 afterPrint 发生时,我需要执行。我的代码在所有浏览器上运行良好,除了当前的 Safari 版本(OSX 上的 Safari 10.1 和 iOS 10.3 上的 Safari 浏览器)。这两个浏览器似乎没有调用事件侦听器(至少用于打印)。

上面的代码与 OSX Safari 9.1.2 和 iOS 10.2 的 Safari 完美配合。但不适用于当前版本。

有人注意到类似的事情吗?还是我必须针对当前的 Safari 版本改进我的代码?

我的猜测是,这是一个 Safari 错误,因为在 Safari 10.1更改日志章节可访问性中有相应的注释。

0 投票
0 回答
65 浏览

javascript - JavaScript - conflicting matchMedia queries

have a fixed vertical dot navigation that fades in when the user scrolls to a certain section on the site so that they can see how many sections there are past that point and can navigate accordingly. If the user then scrolls back up past that point towards the top of the page, the navigation fades out again.

I've built the site so that on devices with smaller viewports (less than 1024px wide) that functionality changes so that the sections exist within accordions to make it easier for the user to navigate, and the fixed dot navigation disappears since it is no longer required.

Here's the Javascript code I have in order to make this work:

However I soon realised after testing this on an iPad that if first entering the page in portrait view, the vertical dot nav is hidden, which is correct but when rotating the device to landscape, the nav is also hidden and the page needs to be refreshed for it to function correctly. The same can be said vice verse, in other words, if entering the page on an iPad in landscape view the nav works fine, but when rotating to portrait view, where the sections change to accordions it is still visible when it shouldn't be.

I have found a way to show and hide the nav for portrait and landscape orientation but this just results in the original functionality being cancelled out i.e. when rotated from portrait to landscape the nav appears wherever you are on the page, even at the top.

Here's the code I used to achieve the show and hide for portrait and landscape:

I hope people can understand my explaination, I would be very grateful if anyone can lend a hand and explain what it is I'm doing wrong/need to do in order to reach a successful solution.

Thanks in advance.

Marc

0 投票
1 回答
142 浏览

javascript - window.matchMedia 3 个间隔

我需要在 javascript 中为我的 web 3 matchMedia 间隔。我试着用这个:

它不起作用。我该如何修改它?谢谢你的帮助!

0 投票
4 回答
1251 浏览

javascript - Window.matchmedia 监听器触发两次

我正在尝试编写一些 javascript 来更改在某些浏览器断点处保存在 JS 配置对象中的一些值。

我已将 window.matchmedia 测试存储在 config 对象中,然后循环遍历该对象的键以向每个测试添加事件侦听器,如下所示:

https://codepen.io/decodedcreative/pen/YQpNVO

但是,当浏览器调整大小并且这些侦听器回调函数运行时,它们似乎运行了两次。在控制台打开的情况下检查上面的 CodePen,你就会明白我的意思了。

有谁知道我在这里做错了什么?

0 投票
1 回答
8834 浏览

javascript - 如何在 matchMedia 查询中结合最大宽度、最小宽度?

我正在使用matchMedia API 来确定 javascript 中的视口,因此我可以最大限度地减少发生的 dom 操作量。

我没有使用任何地方,而是使用Vuedisplay: none的指令确定元素是否插入到 DOM 中。v-if

我已经这样设置了:

移动 matchmedia 查询很好,但我如何确定平板电脑的大小?我想知道是否可以在 matchMedia 查询中组合max-width和值。min-width

当然我可以做这样的事情:

我想知道这是不是这样正确设置的。