问题标签 [matchmedia]

这是我的问题：

我只想为小于“400px”的浏览器提供“addEventListener”点击方法。但是当我们调整浏览器的大小时，我想删除这个方法。

我的代码格式如下。如果我将浏览器长大超过 400 像素，我将继续使用该方法。我需要你的帮助。

我正在使用window.matchMedia. 以下代码按预期工作 - 每个方向更改都以正确的值记录到控制台：

但是当我在 中运行该页面时，不会触发iframe使用注册的回调。addListener在iframe中，我只得到单数日志行 - Onload: Iframe landscape:true，无论设备方向如何。

我使用addListener而不是addEventListener，因为第二个功能不适用于所有 Safari 版本。

在 Safari 14 以及 Chrome 和 Firefox 的开发工具上测试。

我的问题是 - 为什么addListener没有在iframe.

谢谢你。

我正在使用 JavaScript 和 CSScolumn-width布局来计算浏览器窗口中每个新列的断点。对于每个新列，我还增加了计算第二个断点的页边距，以便它们适合。

我的一切都在使用中root.classList.add(myCss)，root.classList.remove(myCss)但对于页边距，如果可能的话，我更愿意更新单个 css 变量--page-margins，而不是添加和删除 css 边距类。

在下面的示例中，当我加载页面并且两列适合浏览器窗口时，正确的--page-margin应该是 16，但 Chrome 检查器显示 24。看起来当页面加载时，matchMedia 事件会检查每个媒体查询，如果没有match 它将 css 变量设置--page-margins为 (cols - 1)，如果该事件先前匹配，我只需要它来执行此操作。

页面加载后，如果我增加和减少浏览器宽度，一切正常。我可以实现这一点的一种方法是使用某种有条件的“如果事件不匹配......”？

我需要在 matchMedia 查询中包装一个 addEvent 侦听器，但我尝试过的一切都行不通。

基本上，我正在尝试实现这样的结果，在移动设备（1080px 及以下）上，当用户向下滑动页面时，我网站上的顶栏向上滑出视图，然后当他们向上滑动时再次向下滑动回到视图中.

但是在任何大于 1080px 的视口上，我希望它保持固定在视口的顶部。

我已经根据用户在页面上的滚动位置实现了上下滑动行为，但我无法弄清楚如何将 matchMedia 附加到 hideNav，以便其上下滑动行为基于 1080px 或更小的视口。

我将不胜感激任何帮助。

非常感谢。

马克

这是我正在使用的代码，它只是关于我需要在 matchMedia 查询中包装的 hideNav 的代码块，而不影响其他 addEventListeners：

我正在尝试使此 if 语句满足满足 mediaQuery 并检查正文是否包含特定类名的要求。但它会导致默认为 else 语句，“低于 799px”。我怎样才能使这个 if 语句起作用？...干杯！

当浏览器的屏幕宽度发生变化时，我会使用 TouchEvents 并使用窗口对象的 matchMedia 方法来实现这一点。这是代码：

问题是当我调整浏览器宽度时，它仍然是要触发的 click 事件，而不是 touchstart 事件。这是为什么？

我尝试了很多方法来阻止此错误，但似乎没有任何效果，这是我的 codepen 的链接：https ://codepen.io/T_manuel/pen/PoKMYVx

当页面加载时，我调用该函数，但是当我调整页面大小时，Javascript 似乎也使用以前的逻辑来执行新逻辑......

加载时，

newImg 设置为 4，似乎一切正常

调整大小后，根据逻辑将其设置为 3 或 4，但不是单独增加该值，而是为负载和调整大小提供值。

我只想在视口宽度大于设定值时运行脚本。我还希望在浏览器调整大小并根据需要禁用/启用时进行检查。我尝试使用matchMedia而不是检查每个像素来实现这一点，脚本仅在视口小于/大于设定值时触发。

如果我加载一个狭窄的视口（小于 1080 像素），JS 不会触发 - 完美！将视口扩大到大于 1080 像素的宽度然后运行脚本 - 也很完美！

我遇到的问题是当我从较大的视口（大于 1080 像素）缩小到窄/小时。在我刷新页面之前，该脚本仍然有效 - 我希望有人可以帮助我。

顺便说一句，是否可以根据需要更改const mediaQuery = window.matchMedia('(min-width: 1080px)') 以包含最小高度或更复杂的媒体查询（对此不是必需的）。

我的脚本：

我正在为主页导航。我用 HTML (PHP)、CSS 编写了它，现在正尝试使用 javascript (jquery) 使其功能化。

我试图实现的大部分工作都很好，但是 matchMedia() 方法与 addEventListener("change") 结合使用时没有按预期工作。在初始页面加载时，页面在大型和小型媒体查询中都按预期工作。当页面调整为其他查询时，功能似乎中断，即使 matchMedia() 似乎正在工作。如果将页面大小调整回初始查询，导航仍然会中断。

但是，如果页面再次调整为另一个查询，然后再次返回（所以从小到大再变回两倍，或者从大到小再变回两倍），则功能返回。刷新也会做同样的事情。

我试图找出我的错误，但无法以某种方式解决这个问题。你可以在这支笔上试试

我为每个可能的情况添加了 console.log() 并在 matchMedia() 方法中应用了绿色或蓝色背景色以便能够解决这个问题，但我仍然迷路了。我将衷心感谢您的帮助。

非常感谢