使一个iframe响应
我正在阅读这个标题为“你能使iFrame响应吗？”的stackoverflowpost ，其中一个评论/答案让我这个jfiddle。
但是当我试图实现HTML和CSS来适应我的需求，我没有相同的结果/成功。 我创build了我自己的JS小提琴，所以我可以告诉你它是如何工作不一样的我。 我确定它与我使用的iFrame的types有关（例如，产品图像可能需要响应太多或什么？）
我主要担心的是，当我的博客读者在他们的iPhone上访问我的博客时，我不希望所有内容都在x宽度（对于我所有的内容都是100％），然后iFrame是错误的，并且是唯一更宽的元素超出所有其他内容 – 如果这是有道理的??）
无论如何，有谁知道为什么它不工作？ 谢谢。
这里是我的JSFIDDLE的HTML和CSS（如果你不想点击链接）：
<div class="wrapper"> <div class="h_iframe"> <!-- a transparent image is preferable --> <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png"/> <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585' frameborder="0" allowfullscreen></iframe> </div> </div> 这里是随附的CSS：
.wrapper {width:100%;height:100%;margin:0 auto;background:#ffffff} .h_iframe {position:relative;} .h_iframe .ratio {display:block;width:100%;height:auto;} .h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
尝试使用此代码使其响应
iframe, object, embed { max-width: 100%; }
我向你呈现难以置信的唱歌猫解决scheme=）
.wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
jsFiddle： http : //jsfiddle.net/omarjuvera/8zkunqxy/2/
当你移动窗口栏时，你会看到iframe来响应resize
我从Dave Rupert / Chris Coyierfind了一个解决scheme。 不过，我想让这个卷轴可用，所以我想出了这个：
// HTML
<div class="myIframe"> <iframe> </iframe> </div>
// CSS
.myIframe { position: relative; padding-bottom: 65.25%; padding-top: 30px; height: 0; overflow: auto; -webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY border: solid black 1px; } .myIframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
你可以使用这个网站上提到的技巧http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php 。
它非常有用和容易理解。 所有你需要创build
<div class="videoWrapper"> <!-- Copy & Pasted from YouTube --> <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe> </div> .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
这里是你编辑的js小提琴演示。
iframe{ max-width: 100% !important; }
看看这个解决scheme…多次为我工作>> https://jsfiddle.net/leowebdev/61nbkatn/
<html lang="en" class="no-js"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden;font-family: arial;font-size: 10px;color: #6e6e6e;background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> var calcHeight = function() { $('#preview-frame').height($(window).height()); } $(document).ready(function() { calcHeight(); }); $(window).resize(function() { calcHeight(); }).load(function() { calcHeight(); }); </script> </head> <body> <iframe id="preview-frame" src="http://leowebdev.com/" name="preview-frame" frameborder="0" noresize="noresize"> </iframe> </body> </html>
DA是对的。 在你自己的小提琴中，iframe的确是响应式的。 您可以通过检查iframe框的大小来validation在萤火虫。 但是，iframe中的一些元素没有响应，所以当窗口大小很小时，它们会“伸出”。 例如， div#products-post-wrapper的宽度是8800px。
我注意到，leowebdev的post似乎在我的工作，但是，它确实淘汰了我试图做的网站的两个元素：滚动和页脚。
滚动我通过添加scrolling="yes"到iframeembedded代码。
我不确定页脚是否因响应性而自动被淘汰，但希望别人知道这个答案。
删除以像素指定的iframe高度和宽度，并使用百分比
iframe{ max-width: 100%;}
<div class="wrap> <iframe src="../path"></iframe> </div> .wrap { overflow: auto; } iframe, object, embed { min-height: 100%; min-width: 100%; overflow: auto; }
通过以下标记：
<div class="video"><iframe src="https://www.youtube.com/embed/StTqXEQ2l-Y"></iframe></div>
下面的CSS使video全angular和16：9：
.video { position: relative; padding-bottom: 56.25%; /* 16:9 */ } .video > .video__iframe { position: absolute; width: 100%; height: 100%; border: none; } }
它通过调整@Connor Cushion Mulhall的代码解决了我的问题
iframe, object, embed { width: 100%; display: block !important; }
我search更多关于这个话题，最后得到一个很好的答案。 你可以这样尝试：
.wrapper { width: 50%; } .container { height: 0; width: 100%; padding-bottom: 50%; overflow: hidden; position: relative; } .container iframe { top: 0; left: 0; width: 100%; height: 100%; position: absolute; }
<div class="wrapper"> <div class="container"> <iframe src="there is path of your iframe"></iframe> </div> </div>
最好的解决scheme，使“iframe”响应和适应所有设备屏幕，只需应用此代码（与游戏网站伟大的工作）：
iframe::-webkit-scrollbar{display:none} .iframe{background:#fff;overflow:hidden} .iframe iframe{width:100%;height:540px;border:0;display:block} .iframe-content{position:absolute;width:100%;height:540px;overflow:auto;top:0;bottom:0;-webkit-overflow-scrolling:touch} @media screen and (max-width:992px){.iframe iframe{height:720px}} @media screen and (max-width:768px){.iframe iframe{height:720px}} @media screen and (max-width:720px){.iframe iframe{height:720px}} @media screen and (max-width:479px){.iframe iframe{height:480px}} @media screen and (max-height:400px){.iframe iframe{height:360px}}
如果您正在寻找适合所有设备的响应式游戏容器，请使用高级CSS @media查询的代码。
入门
由于浏览器的安全性限制，您必须在“父”页面以及通过iframe（“child”）embedded的页面中包含Javascript文件。
在当前版本中，父页面必须包含最新版本的jQuery。 子页面function不依赖于jQuery。 在将来的版本中，我们也想去除父类的jQuery依赖。
注意：makeResponsive（）函数调用中的“xdomain”参数是可选的。
代码示例<!-- Activate responsiveness in the "child" page --> <script src="/js/jquery.responsiveiframe.js"></script> <script> var ri = responsiveIframe(); ri.allowResponsiveEmbedding(); </script> <!-- Corresponding code in the "parent" page --> <script src="/js/jquery.js"></script> <script src="/js/jquery.responsiveiframe.js"></script> <script> ;(function($){ $(function(){ $('#myIframeID').responsiveIframe({ xdomain: '*'}); }); })(jQuery); </script>
在长宽比未知且iFrame中的内容完全响应的情况下完全响应的iFrame。
上述解决scheme都不适合我的需求，即创build一个完全响应的iFrame，其内部具有完全响应的dynamic内容。 保持任何forms的长宽比不是一个选项。
- 获取导航栏的高度和任何内容高于或低于iFrame。 在我的情况下，我只需要减去顶部的导航栏，我想iFrame一直填充到屏幕的底部。
码：
function getWindowHeight() { console.log('Get Window Height Called') var currentWindowHeight = $(window).height() var iFrame = document.getElementById("myframe") var frameHeight = currentWindowHeight - 95 iFrame.height = frameHeight; } //Timeout to prevent function from repeatedly firing var doit; window.onresize = function(){ clearTimeout(doit); doit = setTimeout(resizedw, 100); };
我也创build了一个超时，所以resize的function不会被称为一百万次。
For Example : <div class="intrinsic-container"> <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe> </div> CSS .intrinsic-container { position: relative; height: 0; overflow: hidden; } /* 16x9 Aspect Ratio */ .intrinsic-container-16x9 { padding-bottom: 56.25%; } /* 4x3 Aspect Ratio */ .intrinsic-container-4x3 { padding-bottom: 75%; } .intrinsic-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
简单，用CSS：
iframe{ width: 100%; max-width: 800px /*this can be anyting you wish, to show, as default size*/ }
iFrames无法响应。 您可以使iframe容器响应，但不是它显示的内容，因为它是一个具有自己的设置高度和宽度的网页。
示例小提琴链接的作品，因为它显示一个embedded的YouTubevideo链接没有声明的大小。
