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

Question

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

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

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

Answer 1

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

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