使iframe响应

144

我正在阅读这篇题为“您能否使iFrame响应式吗？”的stackoverflow帖子，并且其中一项评论/答案将我引向了jfiddle。

但是，当我尝试实现HTML和CSS以满足自己的需求时，却没有相同的结果/成功。我创建了自己的JS小提琴，因此我可以向您展示它对我来说是如何工作的。我确定它与我使用的iFrame类型有关（例如，产品图片可能也需要响应）。

我主要担心的是，当我的博客读者在iPhone上访问我的博客时，我不希望所有内容都是x宽度（我所有内容的宽度均为100％），然后iFrame行为不佳，并且是唯一更宽的元素（因此会粘住）超越所有其他内容-如果有意义的话？）

无论如何，有人知道为什么它不起作用吗？谢谢。

这是MY 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%;
}
css  iframe  responsive-design 
— 布赖顿
source
6
iframe本身（“盒子”）可以响应。但是iframe中的所有内容都是单独的页面，因此不在CSS或JS的域中。
— DA。
您可以使用easyXDM在嵌入iframe的页面和iframe指向的服务器上的文档之间进行通信。
— 约翰·史密斯
1
— cregox 2014年

Answers:

107

我向您介绍令人难以置信的Singing Cat解决方案=）

.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进行自适应调整大小

另外，您也可以使用内在比率技术 -这只是上述相同解决方案（西红柿，番茄）的替代选择

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
} 

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
— 奥马尔
source
4
Seealso在这篇文章中详细说明了这种方法：smashingmagazine.com/2014/02/...
— 托马斯Tempelmann
仅适用于youtube iframe。看到这个：jsfiddle.net/1bd8qw76
— csandreas1 '18
2
这项技术将适用于所有iframe，诀窍在于，iframe中的内容也需要具有响应性，有关此内容，请参见
— Ben Marshall
46

我从Dave Rupert / Chris Coyier找到了一个解决方案。但是，我想使滚动条可用，所以我想到了：

// 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%;
}
— 阿维
source
2
如果内容底部填充是内容宽度的比率，则800x600为％
— 75，800x536
1
这是使iframe面向sarafi和所有设备滚动的一个很好的起点。虽然很伤心....
— klewis
这正是我允许iframe滚动所需的内容，因为它的长度超过5000像素。其他代码强制将长iFrame覆盖以下内容。
— penmas
对于16：9，填充底部应为56.25％
— Sergey Sklyar '17
17

您可以使用本网站http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php上提到的技巧。

它非常有用并且易于理解。您需要创建的所有内容

<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小提琴，用于演示。

— Pragnesh Chaudhari
source
10

看看这个解决方案...对我有用>> https://jsfiddle.net/y49jpdns/

<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://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
      </iframe>
   </body>
</html>
— 里奥·莱昂西奥
source
我已经更新了您的小提琴，因为到处都是错误的片段。相同，并且工作相同，但不会混淆位。jsfiddle.net/6NSX3/263
— Techno.Shaman
IOS不能正确计算高度，它会考虑导航栏。同样，IOS上的Iframe不可滚动。
— Tine Koloini
6

DA是对的。摆弄自己的iframe确实可以响应。您可以通过选中iframe框大小来在Firebug中进行验证。但是该iframe中的某些元素没有响应，因此当窗口大小小时，它们会“伸出”。例如，div#products-post-wrapper的宽度为8800px。

— 菲利普007
source
5

iFrame可以完全响应，同时可以使用一种称为固有比率技术的 CSS技术来保持其长宽比。我写了一篇博客文章专门解决了这个问题：https : //benmarshall.me/sensitive-iframes/

要点是：

.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%;
}
<div class="intrinsic-container intrinsic-container-16x9">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
展开摘要

BOOM，反应灵敏！

— 本·马歇尔
source
3

iframe无法响应。您可以使iframe容器具有响应性，但不能使其显示内容，因为它是具有自己设置的高度和宽度的网页。

该小提琴链接示例之所以有效，是因为它显示的是未声明大小的嵌入式youtube视频链接。

— MGDTech
source
这是误导。当指定youtube iframe的宽度和高度时，示例小提琴链接也可以正常使用。
— Philip007
14
我很失望，这是如此残酷。他传达的信息很重要；iFrame会做出响应很危险，因为您对源响应能力一时的渴望。是的，Youtube是个例外。但是他的观点仍然有效。
— MattWithoos 2015年
3

简单，使用CSS：

iframe{
width: 100%;
max-width: 800px /*this can be anything you wish, to show, as default size*/
}

请注意：但是它不会使其中的内容具有响应性！

第二编辑：：响应式iframe有两种类型，具体取决于其内部内容：

一个是当iframe的内只包含一个 视频或一个 图像或者多个垂直定位，为此的CSS代码的上述双行是几乎完全足够了，并且纵横比有意义 ...

另一个是：

联系/注册表单的内容类型，不是必须保持宽高比的地方，而是要防止滚动条出现以及内容从容器中溢出。在移动设备上，您看不到滚动条，只是滚动直到看到（iframe）的内容。当然，您至少要给它height加上，以使内容高度适应出现在较窄屏幕上的垂直空间-使用媒体查询，例如：

@media (max-width: 640px){
iframe{
height: 1200px /*whatever you need, to make the scrollbar hide on testing, and the content of the iframe reveal (on mobile/phone or other target devices) */
}
}
@media (max-width: 420px){
iframe{
height: 1600px /*and so on until and as needed */
}
}
— 桑多·祖伯利
source
1
这很简单而且很棒
— vaishali kapadia，
这不会随着iframe调整大小而保持宽高比，即无论宽度如何，高度都保持不变。
— 瑞安
@ryan我已经更新了答案。顺便说一句，我部分同意你的看法。
— 的SándorZuboly
2

我注意到leowebdev的帖子确实对我有用，但是，它确实剔除了了我要制作的网站的两个元素：滚动和页脚。

通过向scrolling="yes" iframe嵌入代码添加返回，获得了滚动效果 。

我不确定是否由于响应而自动将页脚删除，但是希望其他人知道该答案。

— 克里斯·纳本舒（Chris Knabenshue）
source
2

删除以像素为单位指定的iframe高度和宽度并使用百分比

iframe{  max-width: 100%;}
— 杰斯汀
source
1
但是，它没有使内部内容具有响应性。
— Vir
1 
<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}
— 萨兰
source
1

它通过调整@Connor Cushion Mulhall的代码解决了我

iframe, object, embed {
  width: 100%;
  display: block !important;
}
展开摘要

— 萨旺查萨罗伊
source
1
入门

由于浏览器的安全性限制，您将必须在“父”页面以及通过iframe嵌入的页面（“子”）中都包含Javascript文件。

在当前版本中，父页面必须包含最新版本的jQuery。子页面功能不依赖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>
— 艾哈迈德·埃尔切克（Ahmed Elcheikh）
source
0

使用以下标记：

<div class="video"><iframe src="https://www.youtube.com/embed/StTqXEQ2l-Y"></iframe></div>

以下CSS使视频全角显示为16：9：

.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

.video > .video__iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
  }
}
— 多里安
source
0

我正在搜索有关此主题的更多信息，最后得到一个不错的答案。您可以尝试像这样：

.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>
展开摘要

— 月桂树
source
0

使“ iframe”响应并适合所有设备屏幕的最佳解决方案，只需应用以下代码即可（适用于Games网站）： 

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查询。

— Mizo游戏
source
您好，Iframe html代码很简单，如下所示：
— Mizo Games
<div class =“ iframe”> <iframe src =“”> </ iframe> </ div>
— Mizo Games 2016年
实际上，我在我的网站Al3abMizo Games上使用了它，您可以通过在任何设备上以任何屏幕尺寸玩任何游戏来尝试它。
— Mizo Games
0

对于宽高比未知且iFrame中的内容完全响应的情况，完全响应的iFrame。

以上解决方案都无法满足我的需要，即创建一个完全响应的iFrame，其中包含完全响应的动态内容。保持任何一种纵横比都不是一种选择。

  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);
    };

我还创建了一个超时，以便在调整大小时函数不会被调用一百万次。

— Pe
source
0 
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%;
}
— 特里维迪
source
0

查看完整的代码。您可以按照以下代码的百分比使用容器：

<html>
<head>
<title>How to make Iframe Responsive</title>
<style>
html,body        {height:100%;}
.wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
.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%;}
</style>
</head>
<body>
<div class="wrapper">
<div class="h_iframe">
<img class="ratio" src=""/>
<iframe src="http://www.sanwebcorner.com" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
</body>
</html>

查看此演示页面。

— 拉克
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.