让 iframe 响应

我正在阅读 你能使 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>

512767 次浏览
小开

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

示例 fiddle 链接之所以能够正常工作，是因为它显示的是一个嵌入式 youtube 视频链接，该链接没有声明大小。

小开

检察官说得对。在您自己的小提琴，iframe 确实是响应。您可以在 firebug 中通过检查 iframe 框的大小来验证这一点。但是，iframe 中的一些元素没有响应，所以当窗口尺寸较小时，它们“突出”了。例如，div#products-post-wrapper的宽度是8800px。

小开

尝试使用此代码使其响应

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

我从 Dave Rupert/Chris Coyier 那里找到了一个解决方案。然而，我想让卷轴可用，所以我想出了这个:

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

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

看看这个解决方案，对我很有效

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>

小开

我注意到 leowebdev 的帖子似乎对我有用，不过，它确实破坏了我正在尝试制作的网站的两个元素: 滚动和页脚。

我通过添加一个 scrolling="yes" 到 iframe 嵌入代码。

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

小开

您可以使用这个站点 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演示。

小开

删除以像素表示的 iframe 高度和宽度并使用百分比

iframe{  max-width: 100%;}
小开

使用以下标记:

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

我正在搜索更多关于这个主题，最终得到了一个不错的答案。 你可以试试 这个:

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

小开

我向你们介绍 不可思议的会唱歌的猫解决方案 =)

.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%;
}
小开 
<div class="wrap>
<iframe src="../path"></iframe>
</div>


.wrap {
overflow: auto;
}


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

它解决了我通过调整代码从@Connor 坐垫 Mulhall

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

小开

使“ 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 适用于纵横比未知且 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);
};

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

小开

例如:

<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 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 */
}
}
小开

IFrames 可以完全响应同时保持他们的纵横比一个小的 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>

轰，完全有反应！

小开

查看完整的代码。你可以按百分比使用这些容器，如下面的代码:

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

下面的代码将使固定宽度内容的非响应网站在一个 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>
小开

如果您正好使用 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>

支持几种不同的宽高比，看看文件。

小开

如果您正在使用引导程序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>
小开

我必须用正方形显示 iframe，所以我用了这个

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

提交答案