如何在跨域中创建响应式 iframe？答案

【问题标题】：How to create responsive iframe in cross domain?如何在跨域中创建响应式 iframe？
【发布时间】：2015-05-01 03:39:33
【问题描述】：

我们开发了 IFRAME 并将其提供给其他用户，问题是一旦特定用户在网页中使用该 IFRAME，它就可以正常工作，但一旦切换到移动版本 IFRAME 就会失去其响应能力，使其更具体，内容的 IFRAME 仍然响应，但 IFRAME 没有获得特定的自动高度......？？？请推荐

<iframe src="http://rapidowebs.com/sctimer/my_timer.php?user_id=2"></iframe>ve

【问题讨论】：

标签： javascript php jquery html iframe

【解决方案1】：

根据我的经验，要使 iframe 在每个平台上都能响应，您需要一些 Css

首先将以下代码放入你的css文件中

.responsive_iframe {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
    height: 0; 
    overflow: hidden;
    display:block;
}
.responsive_iframe iframe, 
.responsive_iframe object,
.responsive_iframe embed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 75%;
    height: 75%;
    max-width:90%;
    max-height:90%;
    margin: auto;
    margin-right: auto;
margin-left: auto;
margin-bottom:auto;
display:block;

}

然后你需要放入一些看起来像这样的东西

<div class='responsive_iframe'><iframe allowtransparency='true' frameborder='0'   src='http://rapidowebs.com/sctimer/my_timer.php?user_id=2'></iframe> </div>

当然，这完全取决于你的 iframe 的内容，无论你是打算放入一些对象、嵌入还是图像和文本......

【讨论】：

在我应用您的代码时，移动设备中的高度问题仍然相同。任何其他建议....？帮我解决这个问题。附上链接为例，请在移动版中查看，高度问题保持不变krishnanetwork.rapidowebs.com/demoiframe
我用手机访问了你的网站，我看到了你的问题。我给你的代码是正确的，但它不起作用，因为你没有做对。 css, style 必须在 html div 之前，但是，您将 div 放在 css 之前。查看演示 here 。我已经用 windows phone 8.1 测试过了
我已经编辑了代码检查它并将css放在div之前，它会起作用
谢谢你，它在很多方面帮助了我们，期待你在未来的支持。谢谢......它现在正在工作并且高效......
@KrunalUpadhyay 在这个网站上感谢我的最佳方式是单击我正确答案附近的顶部箭头。这会给答案加一分

【解决方案2】：

你的问题有点不清楚。

所以我假设您希望您的iframe 是 100% 宽度和 100% 高度？如果这就是你想要的，你必须相应地设置它的大小。否则它不知道你想要什么。

工作 jsFiddle：http://jsfiddle.net/ra14bbcb/

【讨论】：

感谢您的回答，抱歉粗略的英语问题现在再次阅读，请帮助我