使一个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的长宽比不是一个选项。

  1. 获取导航栏的高度和任何内容高于或低于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链接没有声明的大小。