问题标签 [matchmedia]

我一直在使用 phantomJS 一段时间，在使用 matchMedia 查询来区分设备类型的网站中使用它时遇到了问题。

有一段时间我认为这是一个幻象问题，但它发生在其他无头浏览器上，如 slimerJS 和 Headless Chrome。

问题是 matchMedia 查询不支持 HB 上的视口。

作为示例，以下步骤重现了这些 HB 中的问题：

1. 设置移动视口（例如：736x414）。
2. 打开https://josebrandao13.github.io/
3. 截图。

截屏

结果总是：“我是平板电脑”。这意味着宽度和高度不是大于 768px。

如果您在 Chrome 或 Firefox 开发工具上打开此网站并在手机和平​​板电脑设备之间切换，matchMedia 会按预期运行。此外，如果我在手机 chrome 上打开它，一切正常。

无头浏览器和 matchMedia 是否存在任何已知问题？

我的应用程序不适合在 iPad 上以纵向模式使用（我以不同方式处理其他移动设备）。我需要向用户显示一条消息，以将他们的设备旋转到横向，以便使用该应用程序。

我正在使用window.matchMedia()，当达到 a 时，我似乎无法获得应用辅助类的功能max or min width。我通过简单的字体大小更改重新创建了以下问题。

我已经阅读matchMedia()并尝试了这两种不同的方法（两者都包含在下面）。为了让函数执行，我是否需要同时包含最小值和最大值？还是我在函数本身的实际结构中遗漏了什么？

我认为 IE9 不支持 matchMedia，但媒体查询支持。

我可能在这里遗漏了重点，但是当您可以简单地将以下代码添加到样式表时，为什么还要使用 matchMedia

然后检查您的Javascript中的条件如下？

我创建了这个函数来处理我的移动导航的切换。

它在移动设备上运行良好。问题是当我调整大小时，切换仍然设置为不显示，并且切换的菜单选项不可见。我尝试使用此 JS 媒体查询根据 786px 的最小宽度重置显示块，但它没有重置菜单。

这是问题的代码。

我有一个切换按钮，它基本上显示/隐藏产品索引页面上的过滤器列表。桌面很简单，当单击按钮时，面板会使用以下脚本显示或隐藏：

当浏览器低于 1024 像素时，我使用 mmenu 插件复制过滤器内容并将其移动到画布外面板中。代码如下所示：

显然（此时）单击切换按钮时，它将显示/隐藏页面上的内容，但同时也会触发滑出菜单。

我的问题是如何仅在需要时运行相关脚本。是否也可以在不只是在 pageLoad/refresh 上调整大小时执行此操作？

我尝试使用matchMedia. 这是一个快速的 CodePen 显示我在哪里......

https://codepen.io/moy/pen/wymvjN

看起来它开始工作了。超过 1024 像素的切换工作。缩小浏览器意味着该按钮触发了滑出面板 - 太棒了！但是，当缩放回桌面时，只要单击切换，就会触发滑出菜单。刷新时它再次工作......直到您缩小浏览器并再次备份。

有任何想法吗？

再会！

在网络上找到了一个判断屏幕大小的脚本，但是想不通如何正确设置isMobile、isTablet、isDesktop的定义。

请告诉我...

现在我使用这种方法：

但我认为上面的脚本更通用。

PS 能不能多吃点正确定义屏幕大小的方法？

谢谢

我正在制作一个页面，当屏幕宽度大于 500 像素时使用按钮显示内容，然后当屏幕小于 500 像素时，它会移动到“手风琴”样式布局。我正在使用事件侦听器并匹配媒体以及 if/else 语句来确定要运行的代码。

但是，当代码以小于 500 像素的窗口运行，然后将其拖出以使其大于 500 像素时，按钮在按下时不会响应“onclick”并且没有任何反应。

有人可以告诉我这里哪里出错了吗？

请在此处查看 JSfiddle

我需要访问我的 HTML 中的 id 来切换段落。由于它是移动优先且响应迅速的，因此仅在最大宽度为 620 时才需要切换，因此我想删除任何大于该宽度的 javascript 切换。我可以像这样将“id”参数从父函数传递给子函数吗？这是我第一次使用 window.matchmedia，因此非常感谢您的反馈。

我有一个问题，即如何用 JS 编写一个正确的句子来反映完整的 css @media 查询与屏幕尺寸和屏幕方向（示例波纹管）window.matchMedia，我能找到的只是一个单独的大小（无方向）和方向（无大小）示例. 这个 CSS 示例的正确语法是什么：

在这段代码中：