问题标签 [matchmedia]

假设我有在调整窗口大小时运行的 JavaScript，但如果你使用 window.load 或 document.ready，它就不起作用。（我的情况）。

我不是在寻找 window.load 或 document.ready (jQuery) 单独...我正在寻找字面上伪造一个窗口调整大小...以使仅调整大小的脚本加载。

如何在不调整窗口大小的情况下伪造窗口调整大小？

我正在编写 UI，我希望 jQuery 检查 media screen min-width，然后检查 div 是否有类。如果是这样，它应该切换类。

我尝试过使用代码，window.matchMedia()但它不起作用

当媒体屏幕的宽度为 800 像素及以上时，我希望.element-view关闭或切换它.navbar-wrapper。.element-view

我不是很擅长 javascript，但我尝试了这个功能。

仅当用户切换浏览器尺寸时才会调用脚本。有人可以为用户修复代码，这不会切换他们的浏览器尺寸。它适用于手机等小于 640 像素的屏幕。

我对 JavaScript 的 matchMedia 有点困惑。我创建了这个 CSS 媒体查询代码的 JavaScript 版本，我期待它会像纵向和横向方向的媒体查询的 CSS 版本一样显示，这可以完美地工作

在移动设备上，但在计算机上，当我调整浏览器的大小时，JavaScript 版本首先显示横向方向，我调整它的大小越多，它就会开始显示纵向方向代码，但 CSS 版本确实

不要那样做。CSS 版本从字面上检测设备方向的变化 那么为什么我会在 JavaScript 版本中获得这种效果呢？以及如何使它更类似于 CSS 版本？还是我应该使用另一种方法更有效地做到这一点？

CSS 版本

JavaScript 版本

嘿朋友们，当页面为 1700 像素或更小时，我正在尝试window.matchMedia("(max-width: 1700px)")在 html 中添加一些元素。现在我只是想通过在屏幕上显示一个功能警报“哟”来测试它。这和我试图改变的其他事情一样不起作用？有任何想法吗？

https://jsfiddle.net/yat5ncmk/6/

是否可以从 Javascript MatchMedia 查询中执行 Twig 'include' 语句？

我试图通过简单地在我们的平板电脑断点处呈现不同的菜单类型来解决另一个问题。

我知道 JS 无法与服务器对话，但有可能以这种方式执行 twig 命令吗？

{% include 'snippets/navbar.rain' 和 {'type': 'Desktop'} %}

{% include 'snippets/navbar.rain' 和 {'type': 'Tablet'} %}

我在网上的任何地方都找不到正确的语法，甚至找不到这是否真的是一个可能的解决方案的例子。谢谢

我正在使用matchMedia().addListener来检测 Safari 中的暗/亮模式主题偏好更改，但是在 WebStorm 中使用addListener被标记为已弃用，但只是说要参考文档以了解应该替换它的内容。

我已经阅读了 MDN 文档，但我不明白我应该监听什么事件类型addEventListener来替换addListener？

考虑以下数组：

现在考虑以下循环：

上面的代码将循环遍历每个媒体查询并根据当前屏幕大小记录它们是否匹配。

问题

在700px宽屏幕上，(max-width: 730px)和都(max-width: 1600px)将匹配。

我需要根据查询大小和查询类型以某种方式仅返回最相关的匹配项。以700px屏幕为例，这应该只返回(max-width: 730px).

有没有一种方法可以实现这一点，window.matchMedia或者是最简单的方法，即根据查询的值和查询的类型将自定义顺序应用于数组，然后返回第一个匹配项？

我有这样的代码和平：

当我在 Chrome 上执行它时，输出是“已解决”并且在“匹配”之后。但是在 Firefox 上，情况正好相反。

我不明白为什么它不同？是否可以强制执行顺序？

我在 Vue 的计算属性中编写的 matchMedia 函数有一些问题。问题是当我加载/刷新页面时，该功能不起作用。只有在我在浏览器的响应式设计模式下调整屏幕大小后，它才能恢复工作。

这是我的 app.js 的代码

我在页面的父级内调用计算属性