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

【问题标题】：Is there a way to change the Iframe width vor the mobile and desktop view?有没有办法改变移动和桌面视图的 iframe 宽度？
【发布时间】：2020-10-06 08:41:13
【问题描述】：

我正在尝试使用媒体查询在我的网站上设置 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;
 }
}

最好的问候

【问题讨论】：

您可以在媒体查询中使用像“iframe{width: 400px}”这样的css。
@IshitaRay 谢谢！我试试就知道了
请向我们展示您的 css 代码并提供屏幕截图...
然后你可以设置两个iframe，一个用于移动端，一个用于桌面端。在媒体查询中，您编写的 css 仅显示 none 或 block。
我现在尝试解决 css 问题...因为我的项目中有很多 css 文件。

标签： html css iframe media-queries

【解决方案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>

我唯一需要更改的只是 宽度 100%。 iframe 现在 100% 具有响应性，并且在桌面视图旁边还有一个不错的移动视图。

【讨论】：

【解决方案2】：

这个标签是你写的吗？

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

【讨论】：

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