问题标签 [enquire.js]

我知道这是本网站和其他地方报告的常见问题，例如

• http://blog.codebusters.pl/en/entry/google-maps-in-hidden-div
• http://dougmolineux.com/wp/?p=242

但我无法解决我的问题。

因此，我首先建立了一个响应式站点，首先是移动设备，并且我正在尝试使自适应地图解决方案正常工作，即移动视口获取静态 Google 地图图像，而对于非移动视口，则使用完整的 Google 地图 API，这一切都必须自行更新当视口不仅在页面加载时调整大小时。基于此：http ://codepen.io/bradfrost/pen/tLxAs 。

我正在使用这个库。

我仅在需要时（非移动视口）通过 jQuery$.getScript以及库setup()和defer()函数有条件地加载 Maps API。

因此，在我使用 jQuery 的每个视口中只有正确的地图渲染，hide()因此show()API 地图不会完全加载自身（只有 1 个图块），如果页面在非移动视口加载，它确实可以正常加载大小，这是当您将移动视口大小调整回非移动视口大小时，因为这是该show()方法启动的时候。其他一切正常。

这是我的代码：

HTML

默认情况下会加载静态地图图像，因为该站点首先是 Mobile 构建的。

JS

这是'/includes/scripts/adaptive-google-map.php'的内容，它是通过 jQuery 进行 AJAX 处理的load()。

这解决了问题：

但是会抛出一个 JS 错误：Uncaught ReferenceError: initialize is not defined. ppl 建议的另一个常见修复方法。正在应用这个：google.maps.event.trigger(map, 'resize');但是当我把它放在之后：mapDynamicContainer.show();在match()函数中我得到这个 JS 错误：Uncaught ReferenceError: google is not defined。

运气不太好:(

我正在使用 enquire.js 为我的一些响应式项目做一些基本的 toggleClass 功能。

对于 Android 2.3 及更低版本和 iOS 4 Safari 等旧版浏览器，以下示例不起作用。

我正在做一些现代化测试，如下所示。较旧的 Android 浏览器和 iOS 4 Safar 不支持 matchMedia，因此 matchMedia polyfill。

我创建了一个测试用例并使用 BrowserStack 对其进行了测试，但它在 iOS 4 及更低版本上失败了。http://goo.gl/3a3ss，或者一个可能有效也可能无效的小提琴.. http://jsfiddle.net/jSg6X/

最初这是在 Drupal 站点上使用的。在初始加载时，一切正常。如果您刷新页面或尝试转到另一个页面，则脚本在 matchMedia 测试中失败。如果您清除浏览器缓存并重新加载，它会再次起作用，但仅适用于该页面。

(函数 ($, 窗口, 文档) {

})(jQuery, this, this.document);

任何帮助，将不胜感激。我不确定我是否没有正确使用 enquire.js，或者我遗漏了一些东西。

我已经创建了一个进一步简化的测试用例，并且得到了相同的结果。我使用了下面的js（没有意义，我知道，但它会在第一次加载时加载警报，仅此而已）

(函数 ($, 窗口, 文档) {

Modernizr.load([ //第一个测试需要 matchMedia polyfill { test: window.matchMedia, nope: 'js/media.match.min.js', load: 'js/enquire.min.js', callback: function( ){ 警报(“测试”); } } ]);

})(jQuery, this, this.document);

这实际上与此问题相同，但我希望有人可以更彻底地回答。

我正在尝试使用两个不同的 js 函数创建网站的“移动”和“完整”版本。我了解响应式设计，并且我正在通过 CSS 进行大部分更改，但是这两个版本需要具有两个不同的互斥 js 函数。Enquire.js允许使用媒体查询，如果浏览器窗口没有调整大小，它们可以很好地工作。但是，如果您将窗口的大小从“完整”调整为“移动”，尽管我在下面做出了最好的（可能不是很好）努力，但我示例中的函数 full() 并没有停止运行。然而，警报总是正确的：full() 为“true”，mobile() 为“false”，这些函数似乎忽略了 if 语句。如果有更好的选择，我可以不使用询问。

js-decider.js

完整的.js

移动.js

嗨，我一直在努力弄清楚如何使用 enquire.js。我正在使用 .mouseenter(function() 来激活 .show 和 .hide 功能。但是当您在平板电脑和移动设备上查看它时，.mouseenter 变得多余。我想告诉 jquery 一旦屏幕宽度达到我的就显示 div媒体查询。

下面是一个例子。

这是我的jQuery：

这是我的html

我已经阅读了文档，并不太明白该放哪一部分。任何帮助将非常感激。

我正在尝试让 Enquire.js 为旧版浏览器工作。我正在使用文档中的深度支持方法：

问题是我使用的是来自 initializr.com 的 Modernizr+Respond，所以测试总是通过。这会在 IE8/9 中的 enquire.js 中触发 JS 错误。

通过删除 respond.js 并仅使用普通的 Modernizr 测试失败，Media.match 加载，JS 错误得到解决。但是，我失去了 IE8 中的媒体查询支持。

让所有东西一起工作的最佳方法是什么？我曾尝试通过 Modernizr 同时加载 respond.js 和 Media.match。如果我先加载它，我会看到与以前相同的 JS 错误。如果我第二次加载它，媒体查询将不起作用。我也试过只加载 Media.match 的 INSTEAD，但 JS 错误返回。

谢谢。

编辑：

发布此消息后不久，我回滚查询 1.5.6，使用了 Respond.js、shouldDegrade 选项，并且没有进行 Modernizr 测试。IE8/9 中没有 JS 错误，到目前为止一切似乎都运行良好。

我仍然很想知道是否有办法让它与 2.0 一起使用，或者我现在是否应该坚持使用 1.5.6？

li.active 宽度从 770px 变为 620px，其中 margin-left 从 -30px 变为 -20px，这是 bootstrap span8 项。

问题：似乎在 css 媒体查询之前查询会触发函数，因此在调整窗口大小时它会拾取先前的值。

当我从 1200 切换到 980 时，调整浏览器窗口控制台日志的大小显示 30px 770 而不是 20px 660，而当我从 980 切换回 1200 时，控制台日志显示 20px 620。

我对这个有点难过。

我将如何关闭移动/平板电脑（<768px）的以下代码并为桌面（>786px）打开它？

Github：
https ://github.com/robspangler/jquery-snappoint

演示：
http ://robspangler.com/git/jquery-snappoint/demo/demo.html

一个正确方向的点将不胜感激。

这是我的两个媒体查询

我正在使用 Enquire.js 来匹配我的媒体查询

问题是如果我从screen and (min-width:1400px) and (min-height:900px)to screen and (min-width:1240px) and (min-height:800px)， equire.js 将不匹配screen and (min-width:1240px) and (min-height:800px)，这会产生问题。我尝试使用 unmatch 来解决这个问题，但是如果我screen and (min-width:1400px) and (min-height:900px)从小于screen and (min-width:1240px) and (min-height:800px). 任何人有任何解决方案？

我目前正在尝试提高我对 jQuery 的整体理解，并且遇到了一个我认为可以帮助我实现这一目标的问题。我正在研究enquire.js以增强响应式网站。

这是（简化的）html，其中一小部分详细介绍了公司的服务：

jQuery 用于小于47em 的屏幕：

在这里，我使用 waypoint.js 通过更改类来触发 SVG 图像上的 CSS 过渡 - 一切都是使用 CSS 逐步完成的。

对于较大的屏幕，CSS 隐藏文本 ( .text)并在单击 ( 将类更改为) 以及触发动画 .closed时显示它。article.open

这就是我对 jQuery 的理解需要提高的地方！我知道我可以将这些 jQuery 对象与 enquire.js 一起使用，以根据屏幕大小基本上匹配和取消匹配它们，如下所示：

但我不知道如何最好地创建对象以便可以以这种方式使用它们。我开始研究jQuery 基础知识，但它没有帮助我:(

更新： 尝试但失败

认为.bind/.unbind可能有效。最初在 click 事件上对此进行了测试，但没有奏效 ，我做错了。点击以下作品：

到达那里！

我使用库 enquire.js，很好的库，但是在 ie8 中有一些问题。控制台在文件 enquire.js 中有消息“对象不支持属性或方法 addListener”，好的，使用 google 并找到解决方案：

好的，现在，我收到消息“对象不支持属性或方法 attachEvent”。有任何想法吗？