Question

我正在尝试在我的网页上添加一个聊天框，这是一个移动设备友好且响应浏览器大小的网页。我已将聊天框添加到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;
}

Answer 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 */
}

Answer 2

将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

Answer 3

修改您的iframe

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

Answer 4

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

Answer 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%;
}

响应式iFrame调整大小

5 个答案: