在媒体查询的视口中禁用fancybox答案

【问题标题】：Disable fancybox within viewports in Media Queries在媒体查询的视口中禁用fancybox
【发布时间】：2012-06-05 00:08:09
【问题描述】：

我想知道是否有一种快速的解决方案可以在我的媒体查询中以低于 480 像素的移动分辨率终止我的 fancybox 调用。这样使用了 fancybox 的项目就不会在特定分辨率下使用它，而是直接链接到 .html 页面（我使用的是 iFrame fancyboxs）。

我刚刚试过 display: none;在我在某些视口使用的 fancybox 类上，但没有成功。

.fancybox-iframe { display: none; }

【问题讨论】：

为什么不先评估viewport？如果viewport > 480 则加载fancybox + 自定义脚本（如果条件为true，则加载某些内容比删除/杀死它更容易）。关于如何检测viewport 以及如果存在条件如何创建脚本 (document.createElement('script');) 有几个问题/答案。

【解决方案1】：

媒体查询是很挑剔的事情。有些 CSS 属性可以使用，有些则不能。我相信，Display 就是其中之一。

我发现最好将 max-width 设置为 0px。

【讨论】：