有没有一种方法可以改变移动端和桌面端视图下的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;
 }
}

此致敬礼

- blackplan

---

你可以在媒体查询中使用类似于“iframe{width: 400px}”的CSS。 - Ishita Ray

@IshitaRay 谢谢！我现在尝试一下。 - blackplan

请展示您的CSS代码，并提供一个截图以展示其外观。 - Ishita Ray

然后你可以设置两个 iframe，一个用于移动端，一个用于桌面端。在媒体查询中，你只需编写 CSS 的 display none 或 block 即可。 - Ishita Ray

我现在尝试解决CSS问题...因为我的项目中有很多CSS文件。 - blackplan

Answer 1

你写了这个标签吗？

<meta name="viewport" content="width=device-width, initial-scale=1.0">

- user14300744

---

嘿@Sherzod，我写了这个标签。 - blackplan

Answer 2

我找到了解决我的问题的方法。 我把 iframe 标签改成了：

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

to

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

我需要改变的唯一一件事就是将宽度设置为100%。现在，iframe已经是自适应的，并且除了桌面视图外，还具有漂亮的移动视图。

- blackplan