问题标签 [matchmedia]

在我的 S3 上，Chrome 和 Firefox 都会触发 matchMedia 事件，说明当我处于纵向模式时我处于横向模式并触摸数据输入字段以输入数据。在我的 iPad 上，这不会发生。在没有改变的情况下宣布方向已经改变当然是不可取的 - 这是每个规范的虚假横向定位事件吗？home.comcast.net/~tommoran4/bug.htm 演示了这个问题。

简短版：您在 if/else 语句中看到任何错误吗？

我需要它做的是检查文档的宽度并相应地调整页面的高度。如果文档 > 1161px 宽，高度 = 8500px。否则，高度 = 12800 像素。

完整版：我正在开发一个在左侧边栏中有重复图像并且在主要内容中有照片库的网站。当用户点击底部的“查看更多”时，会出现更多图像。发生这种情况时，我需要左侧边栏中的图像来扩展页面的整个高度。它似乎在我的 PC 上运行良好，但在 iPad 上却不行。具体来说，页面以正确的高度加载，但是当我单击“查看更多”时，if/then 语句不起作用，因此它从“if”而不是“else”中提取高度。

登台站点可以在这里查看。

据我所知，在caniuse的帮助下，window.matchMedia大多数流行的浏览器都支持它，但 IE<10 除外（诚然，现在这些浏览器并不流行）。

有人知道不支持的浏览器（例如 IE<10）是否在移动平台上占有很大的份额？

这将帮助我为正在编写的 polyfill 做出务实的决定。也就是说，如果matchMedia()不支持，那么它可能是桌面浏览器，我们可以从那里获取它。

谢谢

有人可以帮忙解释一下为什么下面的代码不起作用吗？我似乎无法弄清楚为什么......对我来说，一切都应该正常工作。

这是一个只有 CSS 部分的 jsfiddle，它可以工作。https://jsfiddle.net/24r9cax6/

我已经通过在该函数中添加警报来测试媒体匹配部分，并且我可以在 window.load 上弹出警报，但是 CSS 代码不起作用。我一直无法让 CSS 代码在我的网站上运行，并使我的侧边栏与主要内容的高度相同。我将 js 放在头部和身体的末端。不用找了。

该网站是用 WP 构建的。内容是动态加载的，所以我认为它是在加载内容之前做的高度，但这就是 window.load() 应该解决的问题，对吧？

这是网站上的一篇文章，您可以查看。我希望侧边栏与 mainContent div 的高度相同，因此灰色背景在页面下方继续。但仅限于平板电脑尺寸及以上（使用引导程序）。

http://www.businesstransitionandexitplanning.com/turning-business-income-into-retirement-income/

我正在尝试为视口> = 768px触发我的fancybox，并为视口<768px触发我的滑动框。不幸的是，现在都没有打开......我错过了什么？谢谢你的帮助！我有大量的 CSS，因此我只是添加了 JS（我很确定这是一个语法错误......）。

我正在运行以下代码：

有什么理由为什么这个检查会返回假？这仅发生在 Firefox 浏览器中，适用于各种操作系统。一个相关的细节是，此代码在广告单元内执行，有时在 HTML5 广告单元内执行。

这发生在 Windows 7、Windows 8、Windows 10、Mac OS X 10.8 和其他几个操作系统中，Firefox 的版本从 36 到 41 不等。

编辑：在此处找到此错误报告，并能够在 Mac OS X 10.10 上的 Firefox 41 中复制 - matchMedia 在隐藏的 iframe 内无法正确运行。

我现在尝试了几个小时在特定屏幕尺寸（>60em 和 <90em）的两个 div（除了和 .related）周围添加一个包装器。我正在使用 matchMedia 和 eventListener 执行此操作。包装器似乎添加在正确的位置，但问题是即使不满足大小条件，它仍然存在。

这是一个jsfiddle：http: //jsfiddle.net/Vanilla__/4q26ngmg/1/

简化的 HTML：

Javascript：

我想添加一个“else”来删除孩子（使用removeChild）或删除eventListener（使用removeEventListener），但我得到的只是关于该函数未定义的错误或我尝试​​的其他错误。

有谁知道当屏幕尺寸不是 >60em 和 <90em 时如何移除包装？我是 Javascript 菜鸟（可能很清楚；））。任何帮助表示赞赏。

我有一个打印按钮，可以在任何网页上启动打印功能。一旦用户单击该按钮，该按钮就会隐藏，并显示用户是否已完成打印或在打印窗口中按下关闭。它在 Chrome 中运行良好，但在 Firefox 和 IE 中失败。

有什么建议我可能会错过吗？

我正在使用 window.matchMedia 条件以避免在移动设备中注入视频。这里它说 matchMedia 自 Safari 9 （我正在测试它）以来将顺利运行，但我的代码被完全忽略：

此代码在 Chrome、Chromium、Firefox、IE 和 Edge 上完美运行。

有没有人有类似的问题？

window.matchMedia 正在工作，但我认为它会像使用“@media only screen and”一样工作，当屏幕变窄时会发生这种情况。例如，如果您使用的是桌面浏览器，则必须使用 window.matchMedia 加载或刷新屏幕。有没有办法让 window.matchMedia 像 @media CSS 一样工作，当您增加或减少屏幕宽度时它会自动发生，而无需刷新或（重新）加载屏幕？

以下示例用于：Americastributetoparis.com

});