响应式 iFrame 调整大小答案

【问题标题】：Responsive iFrame resizing响应式 iFrame 调整大小
【发布时间】：2016-05-10 06:24:52
【问题描述】：

我正在尝试在我的网页中添加一个聊天框，否则它对移动设备友好且可响应浏览器大小。我已将聊天框添加到 iFrame，但它不想与页面的其余部分一起调整大小并且保持静态。我希望有一种方法可以调整聊天框的大小，以便它可以随页面动态改变大小和纵横比。我计划允许移动用户使用它，但不知道如何让它正常工作。

感谢任何建议。

这是我的 html 和 css 的简化版本。

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <link rel="stylesheet" href="style.css">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Test</title>
</head>
<body>
    <div class="maincontent-area">
        <iframe src="chat.html" width="400" height="600" frameborder="no" scrolling="no"></iframe>
    </div> 
</body>
</html>

chat.html

<HTML>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script id="cid0020000123830884525" data-cfasync="false" async src="http://st.chatango.com/js/gz/emb.js" style="width: 400;height: 600;">{"handle":"frequency84","arch":"js","styles":{"a":"33CCFF","b":100,"c":"000000","d":"000000","k":"33CCFF","l":"33CCFF","m":"33CCFF","p":"10","q":"33CCFF","r":100,"fwtickm":1}}</script>
</head>
</body>
</HTML>

style.css

@charset "utf-8";
/* CSS Document */

.mainmenu-area {
    background: none repeat scroll 0 0 #fbfbfb;
    font-family: "Roboto Condensed",sans-serif;
    text-transform: uppercase;
    width: 100%;
    z-index: 999;
}

【问题讨论】：

想通了，谢谢大家:)

标签： html css iframe responsive

【解决方案1】：

我建议使用媒体查询。

@media screen and (max-width:480px){ /* change to your mobile size */
    .mainmenu-area{
        width:/* new width */;
    }
}

您甚至可能需要更改定位 iframe 的方式

.mainmenu-area iframe{
    /* code here */
}

而不仅仅是

.mainmenu-area{
   /* code here */
}

【讨论】：

【解决方案2】：

编辑你的 iframe

<div class="maincontent-area">
  <iframe src="chat.html" width="100%" height="600" frameborder="no" scrolling="no"></iframe>
</div>

【讨论】：

在调整大小时没有对聊天框做任何事情。

【解决方案3】：

将 iframe 宽度设为 100%

 <div class="maincontent-area">
    <iframe src="chat.html"
    width="100%" height="600" frameborder="no" scrolling="no"></iframe>
  </div>

在 chat.html 上

<script id="cid0020000123830884525" data-cfasync="false" async src="http://st.chatango.com/js/gz/emb.js" style="width: 100%;height: 600;">{"handle":"frequency84","arch":"js","styles":{"a":"33CCFF","b":100,"c":"000000","d":"000000","k":"33CCFF","l":"33CCFF","m":"33CCFF","p":"10","q":"33CCFF","r":100,"fwtickm":1}}</script>

下面的工作示例

Fiddle

【讨论】：

在调整大小时没有对聊天框做任何事情。
你还需要在 chat.html 中设置宽度 100%
这似乎解决了调整大小的问题，现在它将改变纵横比和大小。我该如何让它成为 400x600 像素呢？它目前占据了浏览器的整个宽度。
您可以在 css 中给出 max-width:400px，但不确定您的布局和所需的要求。主要问题是固定宽度，现在已经没有了，所以你现在可以接受我的回答了。
@RobertKulevich 你应该接受这个作为答案，因为答案解决了你的问题，如果你不知道，只是通知你。

【解决方案4】：

@media screen and (max-width:480px){ /* change to your mobile size */
    .mainmenu-area{
        width="100%";
    }
    iframe{
        width="100%";
    } 
}

【讨论】：

请添加一些解释

【解决方案5】：

我是这样做的，它对我有用。希望对你有帮助。

<div class="map">
  <iframe src="" width="2560" height="500" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

还有css：

.map {
  width: 100%;
  height: 500px;
}
.map iframe {
  max-width: 100%;
}

【讨论】：