问题标签 [enquire.js]

Enquire.js 是一个 Javascipt，它为 Javascripts 重新创建 CSS 媒体查询。这意味着您可以将 Javascript 包装在媒体查询中。（就像您在媒体查询中包装 CSS 一样）。

我不太确定如何使用它。本教程是这样说的：

但是，当我遵循这一点时，我的代码将停止工作。

这是一些没有 Enquire.JS 的 Jquery 选项卡的示例。它工作正常。

这是相同的选项卡，但添加了 Enquire.JS。现在它停止工作。

我已经尝试了不同的代码变体，但它们都不起作用。我究竟做错了什么？

我认为您可能已将 Jquery Tab 代码放在单独的文件中，然后从 Enquire.Js 中链接到该文件，但我不确定您将如何做到这一点。（虽然知道它会很方便，因为我想它会让你的脚本更可重用）。

PS。这不是对 Enquire.Js 的批评。我知道问题完全在于我对 Javascript 的不熟练！我确实花了几个小时寻找解决方案，但找不到任何东西。

谢谢你的帮助！

我制作了一个包含两个不同脚本的页面。运行的脚本由屏幕大小决定。Enquire.Js就是用来实现这一点的。

当在大于 600px 的屏幕上查看页面时，我希望内容使用 jQuery 选项卡显示。我在这里做了一个测试模型，它工作正常：Live Page || JS 小提琴版

虽然它有效，但它只能以一种方式工作。即当窗口调整大小时，Enqiurie.js 会发挥它的“魔力”。但是，如果再次调整窗口大小，则“魔术”不会逆转。（与 CSS 媒体查询相反，其中重新调整窗口大小会再次反转媒体查询）。

当页面在小于 600px 的屏幕上查看时，我希望它以 iPhone 风格的 Nav 显示。我在这里制作了一个测试模型，它也可以正常工作：Live Page || JS Fiddle 版本 然而，它也只能以一种方式工作。

当我尝试结合这两个演示时（即它在 Tabs 和 iphone 样式 Nav 之间切换，它不太工作。在此处查看测试模型：Live Page || JS Fiddle 版本

如果浏览器加载时超过 600 像素，则必须刷新窗口才能显示选项卡。如果您将窗口从小于 600 像素重新调整为大于 600 像素，一些小于 600 像素的代码似乎仍然存在。

我不确定我做错了什么。谢谢你的帮助！

我一直在修改 enquire.js，到目前为止发现它非常方便。

我刚刚碰了壁，可以多用一双眼睛。这是我正在使用的脚本：

`// 来自http://css-tricks.com/scrollfollow-sidebar/的脚本

目标是在屏幕足够宽时有一个滚动的侧边栏，但在没有空间的时候没有。我遇到的问题是它加载得很好，或者我可以加载宽度较小的页面，但是在我使用平板电脑并且我在纵向和横向之间更改方向的情况下，它可能会工作一次，但最终侧边栏不会跟随滚动。

我猜这是因为我没有正确加载或卸载它，但在媒体查询更改的情况下，我不确定在 JQuery on() / off() 事件处理程序中使用什么事件。

有问题的网站是http://samuel-allen.com

有什么作为明显的错误或遗漏跳出来的吗？

提前致谢。

这可能是大多数阅读的基础，但我似乎无法弄清楚。

我有一个小测试功能，如果在一定宽度下我想执行。当屏幕旋转或调整大小超过该宽度时，我希望该功能停止工作。为简单起见，这里是一些示例代码。

因此，如果页面加载超过 500 像素，它会按预期工作。点击不会执行。如果页面在 500px 或以下加载，则执行 click 函数。唯一的问题是，如果您调整视口大小或将方向更改为 500 像素以上，该函数仍会执行。我希望能够禁用它。

我实际上在这里尝试做的真实世界场景是我有一个包含 4 个项目的无序列表。超过一定宽度时，它们会立即显示。如果在一定宽度下，我只想隐藏它们并单击显示它们。我知道有几种方法可以做到这一点（.toggle()、.toggleClass("myclass") 等）。

我已经这样做了很多次，但我总是被进入/退出断点和事情没有被重置，或者按预期工作。通常它并不重要，但最近在我的一些用例中它很重要。

我知道 unmatch 选项，但我不确定如何真正杀死上面匹配的函数。

任何帮助，将不胜感激。我很确定它会帮助我目前的情况，但也会帮助我扩展我对 enquire.js 的了解以用于其他事情。

谢谢。

编辑：我忘了提...如果您将页面加载到 500 像素以下，然后调整大小或将其定向更宽然后 500 像素，然后在 500 像素以下返回，点击功能将无法再次工作..这也让我感到困惑。我基本上希望它在低于 500 像素时无论如何都能工作，而在超过 500 像素时根本不起作用。

我正在尝试在一个项目中使用 enquire.js 来控制带有媒体查询的 jQuery 我有一个 jquery 幻灯片，我想在窗口宽于 500 像素时启动它。

我在 load_Gallery.js 中使用此代码

我在页面顶部调用 load_Gallery.js。

我在这里下载了 enquire.js -

https://raw.github.com/WickyNilliams/enquire.js/master/dist/enquire.js

我将它复制到一个 txt 文件中，并在我的 js 文件夹中将其命名为 enquire.1.4.1.js 以及其他 js 文件。

我没有像文档头部的其他 js 文件一样调用这个文件，我应该在头部调用它吗？

我做错了什么 - 任何建议。

我想创建一个响应式网站。如果浏览器是移动设备大小的，内容应该以 iPhone 样式列表视图显示如果浏览器是桌面大小的，内容应该用标签显示：

这样做的最佳方法是什么？ 我不想为移动/桌面使用单独的文件。我希望它反应灵敏。

这是我所做的一些研究。

尝试 1：纯 CSS 解决方案。

纯 CSS 解决方案将是最好的，因为 CSS 提供媒体查询，可以轻松在布局之间切换。CSS 提供了创建标签的方法。但它似乎没有为 iPhone 样式列表提供方法。（您几乎可以使用手风琴列表来伪造它，但这不会像在真正的 iPhone 应用程序上那样将用户带到单独的页面）。

尝试 2：Jquery 解决方案（见 Fiddle）

• Jquery Mobile提供了一种创建iPhone 样式列表视图的简单方法
• Jquery UI提供了一种创建选项卡的简单方法。
• Enquire.js为媒体查询提供了等效的 Javascript。

在这个小提琴中，我尝试将 Jquery Mobile 和 Jquery Ui 结合起来。Enquire.Js 用于根据屏幕调用必要的库。

当一个库被调用时，它会改变 dom 结构。所以必须删除不需要的库，否则如果用户重新调整浏览器的大小（即在移动桌面之间切换），未使用的库将中断，导致调用库发生冲突。

在我的小提琴中，我试图这样做，但它似乎不起作用：

即使删除了未使用的库，也会导致新库发生冲突。此外，您必须在调用任何布局之前重新调整浏览器的大小。如果用户不重新调整浏览器的大小，则内容将没有样式。

尝试 3：Dom 克隆（参见 Fiddle）

此尝试类似于尝试 2，除了在页面加载时它将 DOM 存储在一个变量中。然后当用户重新调整浏览器的大小时，现有的 DOM 会被存储的 DOM 替换。我已经按照这里的方法大纲进行了操作，但它似乎不起作用。dom 只是被删除而不是被替换。

我将不胜感激，因为我一直在努力寻找解决方案！（我知道我问过一个与此类似的问题，但我觉得这个新问题与此不同，足以保证发布新帖子。）

尝试 4：动态分配数据属性

Jquery mobile 使用标记中的数据属性来使脚本工作。我尝试过动态应用这些，因此它们仅在浏览器处于移动大小时才写入文档。但是，当重新调整浏览器大小时，桌面选项卡仍然损坏。

好的，所以我使用Respond.js作为旧版浏览器上的媒体查询的 polyfill（ie8 是最重要的）。

同时，我正在研究使用Enquire.js，它可以根据媒体查询匹配执行 js 代码。

单独测试这些东西有效：

• respond.js 为 IE8 正确执行 css 中定义的媒体查询
• enquire.js 根据匹配 css 的媒体查询正确执行 javascript 代码。（对于非旧版浏览器）

但是组合似乎不起作用。IE：

Enquire.js 不会基于通过 respond.js 启用的媒体查询执行 javascript（对于旧版浏览器）

由于 Respond.js 包含 Paul Irish 的MatchMedia 填充物（根据： Enquire 's documentation）应该足以支持旧版支持，我不确定可能出了什么问题。

所以只是为了检查：这种组合应该有效吗？

我试图找出让 enquire.js 在旧版浏览器（即 6-9）上工作的最佳方法。在 enquire 的网站上，它说使用modernizr 检查matchMedia 支持，如果不支持则加载polyfill。

查看它建议的 polyfill，它说modernizr 已经将它包含在 Modernizr.mq() 中。

我已经对此进行了调查，但找不到使这项工作正常进行的方法。

我正在按照附件运行一个非常简单的 enquire.js 测试，发现它没有得到 IE9 的响应。其他几个浏览器响应良好（FF、Chrome、Safari）。我已经在 IE9 中测试了来自 GITHUB 的测试套件，它运行良好——所以我一定遗漏了一些东西。任何帮助表示赞赏！

希望你能帮助我。

我在论坛上搜索过，我猜这个是一个特例。

我正在构建的项目由媒体查询（响应式）提供支持，我有 3 列，有时需要 4 列处于相等的高度。我在 Jquery 中开发了一个脚本，效果很好。见下文

但是当我要移动版本时，低于 767px，我如何在不刷新页面的情况下销毁这个setHeight()函数。

其他替代方法，我可以在下面使用 enquire.js、javascript 媒体查询来执行此操作，但如果我直接从桌面/平板电脑转到移动设备，则无需刷新就无法使其工作。像下面这样