问题标签 [matchmedia]

我一直在使用以下代码进行响应式图像替换：

（编辑）新的精简版 JavaScript：

我真的很喜欢用于图像更改的“图像 ID + 文本字符串”方法。它允许单个脚本（每个媒体查询）根据需要运行尽可能多的图像。许多响应式图像脚本/插件/库都涉及到这一点。很多。加价。

但是这个特定的脚本只能工作：

1.) 最初是为“onMouseOver”翻转效果设计的，这个脚本需要一个事件监听器。这对于响应式图像脚本来说并不理想，因为在“onLoad”事件结束后很长时间会调整浏览器的大小并且移动设备会改变方向。

2.) 此脚本只能更改非空的 src 属性（上例中从“test_image_small.jpg”更改为“test_image_large.jpg”）。这意味着两个图像仍在加载，浪费带宽并使布局令人讨厌地跳来跳去。我宁愿填写一个空的 src 属性。

所以基本上我需要 - 并且无法弄清楚 - 是这样的：

我正在开发一个角度应用程序，并尝试使用 matchmedia 实现方向更改。当我第一次加载我的页面时，我在我的控制器中运行一行代码来检查我是否处于横向状态：

这工作正常。但是当我想检测方向的变化时，我使用以下代码：

因此，当方向改变时，页面会重新加载，它会再次检测方向。但现在它给出了相反的结果。因此，当它应该为真时，它会说景观 == 假。有人知道这是为什么吗？还是我使用了错误的技术来处理方向变化？提前致谢！

我正在尝试在移动设备上使用一个功能（在本例中小于 700px），在大型设备上使用另一个功能。我通过以下方式使用 matchMedia：

起初，代码按预期运行，当我调整窗口大小时出现问题。例如，如果窗口首先加载到 700 像素以下，然后将其大小调整到 700 像素以上，则按钮会先触发淡入淡出，然后再滑动，反之亦然。我想实现的目标是只在大屏幕上调用幻灯片，只在小屏幕上淡入淡出。任何帮助是极大的赞赏。

干杯!

我已经设法让我的 matchmedia 查询部分工作，即它适用于窗口加载但无法调整大小。我对此真的很陌生（因此这个蹩脚的问题）所以放轻松，慢慢说。我试图让它在屏幕更改或页面加载时触发。

http://codepen.io/anon/pen/XJZOMw

感谢和抱歉，如果这是重复的或只是垃圾编程和/或写得不好或在错误的地方。

我的代码中有以下函数，我想在设备窗口/视口宽度小于 768px 时触发一个函数。此函数在页面加载时触发（因此在侦听器之外进行查询），在 Chrome 中进行测试期间，我发现侦听器在调整大小时触发两次，首先返回 false，然后返回 true。尽管窗口/视口的宽度永远不会低于 768px。在 Firefox 中进行相同的测试时，它似乎表现正确。

有没有其他人经历过这种情况，如果有，你的解决方案是什么？

注意在 Chrome 中，我在“设备模式”中选择“Apple iPad 3/4”进行测试，在 Firefox 中，我使用的是 768x1024 运行的“响应式设计视图”

I have created the following page layout, but it relies heavily on javascript. I've tried thinking of other ways to accomplish this more simply, but cannot come up with any.

Just wondering if anyone has any bright ideas to achieve this layout without javascript?

如何为下面的页面路由执行 matchmedia。也就是说，如果它是平板电脑，我想为 home 加载不同的 templateURL？

我有这段代码将事件注册到断点数组：

它工作得很好，但我希望能够在以后从这些中断中删除听众。有谁知道删除以后动态注册的事件侦听器的最佳方法是什么？

我有以下代码在屏幕尺寸770px及以下时可以正常工作（由断点确定）：

问题是当窗口大小调整为770px向上时，我失去了我的课程。

如何在窗口调整大小时改变类？

我正在尝试合并Codrops 的 jQuery 插件- 这使得菜单变成了左侧和底部的栏。我想在桌面屏幕上使用与通常顶部栏相同的菜单，只是更改演示附带的 id 和类的样式。我想知道最好的 Javascript 解决方案是在最大宽度为 768 上包含插件脚本，然后在更大的地方删除它们。我也希望它在浏览器调整大小时进行自我检查和更新。这是我到目前为止所拥有的...