加载特定于 iframe 大小的媒体查询

Question

我正在尝试为自适应广告加载相同 HTML 的多个实例。理想情况下，此广告将全部来自相同的 HTML 来源 (ad.html)，然后针对每个尺寸的广告采用不同的响应式 CSS。然后，我们需要做的就是将 iframe 的大小指定为我们配置的选项之一，这是一种针对多种广告尺寸的解决方案。

现在，问题来了。广告 CSS 在一个大小合适的 iframe 中加载时，不会将该 iframe 的大小识别为其边界框，而是将整个浏览器识别为边界框。因此，我们的特定大小的媒体查询失败了，如果没有它，整个想法就毫无意义了。

有没有办法做我想做的事？我在媒体查询上使用简单的最小和最大宽度，所以除非我弄错了它们应该加载到 iframe 的尺寸。

Answer 1

我能够通过将媒体查询从最小宽度更改为最大宽度来解决这个问题。执行此操作后，浏览器会正确识别每个特定 iframe 的媒体查询。

此外，如果您在一个页面上多次加载同一个 iframe，IE 将无法识别四个媒体查询。