我对 iFrame 内内容的媒体查询内的样式有疑问。 我的网站中嵌入了一个 iFrame。我们为 iFrame 内的内容提供了样式。我的 iFrame 宽度是 480px。我有一个媒体查询 @media screen 和(最大宽度:480px)，我在其中向 iFrame 内的内容添加样式。
问题是，当在宽度为 1900px 的桌面浏览器中打开页面时(iFrame 大小相同为 480px)，将应用 max-width: 480px 的媒体查询内的样式。但是，当我在 iPad 中打开同一页面时，它没有考虑媒体查询的 iFrame 宽度，而是采用屏幕宽度并应用 768px 宽度媒体查询样式。
据我所知，它必须采用 iFrame 宽度，并且必须呈现 iFrame 宽度媒体查询样式，因为 iFrame 包含整个 html 页面。请告诉我如何解决 iPad 问题。
最佳答案
iframe 宽度也取决于视口(viewport)，因此请尝试设置如下内容:
<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 是否在特定设备内。
关于iFrame 和媒体查询问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14158682/