css - 使 iframe 响应式

Question

我在读你能让 iFrame 响应吗？，其中一个评论/答案将我带到了这个 JSFiddle。

但是当我尝试实现 HTML 和 CSS 以满足我的需要时，我没有得到相同的结果/成功。我创建了自己的 JSFiddle，因此我可以向您展示它对我来说是如何工作的。我确定这与我正在使用的 iFrame 类型有关（例如，产品图像可能也需要响应或其他什么？）

我主要担心的是，当我的博客读者在他们的 iPhone 上访问我的博客时，我不希望所有内容都处于 x 宽度（我的所有内容为 100%），然后 iFrame 行为不端并且是唯一更宽的元素（因此坚持超越所有其他内容 - 如果这有意义吗？）

有谁知道为什么它不工作？

这是我的 JSFiddle 的 HTML & 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%;
}

<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>

score 134 · Accepted Answer

我向您介绍令人难以置信的唱歌猫解决方案 =)

.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%; /* 16:9 */
  position: relative;
} 

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

score 68 · Accepted Answer

68

尝试使用此代码使其响应

iframe, object, embed {
    max-width: 100%;
}

于 2013-09-14T11:45:45.660 回答

score 46 · Accepted Answer

I found a solution from from Dave Rupert / Chris Coyier. However, I wanted to make the scroll available so I came up with this:

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

<div class="myIframe">
  <iframe> </iframe>
</div>

score 17 · Accepted Answer

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

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

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

<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>

这是您编辑的js fiddle用于演示。

score 13 · Accepted Answer

看看这个解决方案。这个对我有用

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>

score 11 · Accepted Answer

11

iframe{
  max-width: 100% !important;
}

于 2014-05-27T21:27:40.080 回答

score 9 · Accepted Answer

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

示例小提琴链接有效，因为它显示了一个没有声明大小的嵌入式 youtube 视频链接。

score 9 · Accepted Answer

iFrame 可以完全响应，同时通过一种称为“内在比率技术”的小 CSS 技术保持其纵横比。我写了一篇专门解决这个问题的博客文章：https ://benmarshall.me/responsive-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，完全响应！

score 6 · Accepted Answer

达是对的。在您自己的小提琴中，iframe 确实是响应式的。您可以通过检查 iframe box-sizing 在 firebug 中验证这一点。但是该 iframe 中的某些元素没有响应，因此当窗口大小较小时它们会“突出”。例如，div#products-post-wrapper的宽度为 8800px。

score 4 · Accepted Answer

简单，使用 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 */
}
}

score 3 · Accepted Answer

我注意到 leowebdev 的帖子似乎确实对我有用，但是，它确实淘汰了我正在尝试制作的网站的两个元素：滚动和页脚。

我通过添加 scrolling="yes" 到 iframe 嵌入代码得到的滚动。

我不确定页脚是否因为响应性而被自动剔除，但希望其他人知道这个答案。

score 2 · Accepted Answer

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

iframe{  max-width: 100%;}

score 2 · Accepted Answer

<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}

score 1 · Accepted Answer

如果您碰巧使用的是 Bootstrap CSS 库，则可以使用它提供的响应式嵌入类：

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

支持几种不同的纵横比，请参阅文档。

score 1 · Accepted Answer

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

iframe, object, embed {
  width: 100%;
  display: block !important;
}

score 0 · Accepted Answer

使用以下标记：

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

score 0 · Accepted Answer

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

.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>

score 0 · Accepted Answer

下面的代码将使 iframe 内的非响应式网站的固定宽度内容调整为视口宽度，前提是其宽度大于视口宽度。出于演示目的，该网站是 800 像素宽的单个图像。您可以通过调整浏览器窗口大小或在手机中加载页面来进行测试：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
iframe {width: 100%; transform-origin: left top;}
.imgbox{text-align:center;display:block;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>   
<script>
jQuery(document).ready(function($){
    nsZoomZoom(); 
    $(window).resize(function(){ 
        nsZoomZoom();
    });
    function nsZoomZoom(){
        htmlWidth = $('html').innerWidth();
        iframeWidth = 800;
        if (htmlWidth > iframeWidth)
            scale = 1;
        else {
            scale = htmlWidth / (iframeWidth); 
        }
        $("iframe").css('transform', 'scale(' + scale + ')');
        $("iframe").css('width', '800');
    } 
}); 
</script>
</head>
<body>
<div class=imgbox>
    <iframe src="http://placekitten.com/g/800/600" scrolling=no width=800 height=600 frameborder=no></iframe>
</div>
</body>

score 0 · Accepted Answer

我必须以正方形显示 iframe，这就是我使用的

.video-wrapper {
  position: relative;
  padding-bottom: 100%;
}
.video-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}

score 0 · Accepted Answer

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

<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>

score 0 · Accepted Answer

完全响应式 iFrame 适用于宽高比未知且 iFrame 中的内容完全响应式的情况。

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

获取导航栏的高度以及 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);
    };

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

score 0 · Accepted Answer

如果您使用的是 bootstrap 4，那么只需使用实用程序类进行嵌入

https://getbootstrap.com/docs/4.5/utilities/embed/

例子：

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Xh3j915ZnCo?rel=0" allowfullscreen></iframe>
</div>

score 0 · Accepted Answer

例如：

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

score 0 · Accepted Answer

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

css - 使 iframe 响应式

24 回答 24

Related

Reference