有没有办法改变移动和桌面视图的 Iframe 宽度？

Question

我正在尝试使用媒体查询来设计我网站上的 iframe 样式。由于从 iframe 加载的表单是响应式的，并且在桌面视图中看起来不错，但在移动视图中看起来很糟糕。

如果我将 iframe 标记宽度直接设置为 700，它在桌面上看起来不错，但不适合移动视图。

<iframe src="....." frameborder="0" width="700" height="950">Your browser does not support embedded frames (iframes) <a href="...." target="_blank">further</a></iframe>

从我的 CSS 更新：

@media screen and (max-width: 600px) {
  body {
    background-color: blue;
  }

 iframe {
   width: 700px;
 }
}

此致

Answer 1

我找到了解决我的问题的方法。

我更改了 iframe 标签

<iframe src="....." frameborder="0" width="700" height="950">Your browser does not support embedded frames (iframes) <a href="...." target="_blank">further</a></iframe>

到

<iframe src="....." frameborder="0" width="100%" height="950">Your browser does not support embedded frames (iframes) <a href="...." target="_blank">further</a></iframe>

我唯一需要改变的是width 100%。iframe 现在具有 100% 响应能力，并且除了桌面视图之外还有一个漂亮的移动视图。