2

我对 iFrame 中内容的媒体查询中的样式有疑问。我在我们的网站中嵌入了一个 iFrame。我们为 iFrame 中的内容设置了样式。我的 iFrame 宽度是 480 像素。我有一个媒体查询@media screen 和（最大宽度：480px），我正在向 iFrame 中的内容添加样式。

问题是，当在大小为 1900px 宽度的桌面浏览器中打开页面时（iFrame 大小相同为 480px），媒体查询中 max-width: 480px 的样式被应用。但是当我在 iPad 中打开同一页面时，它没有考虑媒体查询的 iFrame 宽度，而是采用屏幕宽度并应用 768px 宽度的媒体查询样式。

据我所知，它必须呈现 iFrame 宽度和 iFrame 宽度媒体查询样式，因为 iFrame 包含整个 html 页面。请让我知道如何解决 iPad 问题。

4

1 回答 1

6

iframe 宽度也取决于视口，因此请尝试设置如下内容：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0;" />

此外，如果您想定位特定设备（如 ipad），并且 iframe 中有内容，则可以考虑使用 min-device-width 来确定您的 iframe 是否在特定设备中。

于 2013-12-30T11:23:39.817 回答