使 iframe 响应

问题描述

我正在阅读 this stackoverflow post 题为「你能使 iFrame 响应吗？」，其中一个意见/答案让我到 this jfiddle.

但是当我试图实现 html 和 css 以满足我的需要时，我没有相同的结果/成功。我创建了 my own JS fiddle，所以我可以告诉你，它对我来说不一样。我确定它与我正在使用的 iFrame 的类型有关 (例如，产品图像可能需要响应或某些东西？)

我的主要关注点是，当我的博客读者在他的 iPhone 上访问我的博客时，我不希望所有内容都是 x 宽度 (所有内容都是 100％)，然后是 iFrame 的不正当行为，是唯一的元素超越所有其他内容 – 如果这是有道理的话)

无论如何，有谁知道为什么它不工作？谢谢。

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

次佳解决方案

我找到了一个来自 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%;
}

第三种解决方案

我向你呈现不可思议的唱歌 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 响应式调整大小

第四种方案

您可以使用本网站提到的这个技巧 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 fiddle 用于演示。

第五种方案

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

第六种方案

查看这个解决方案… 多次为我工作>> 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="//googleajax.admincdn.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 box-sizing 来验证在 firebug 中。但是 iframe 内部的某些元素没有响应，所以当窗口大小小的时候，”stick out” 。例如，div#products-post-wrapper 的宽度为 8800px 。

参考文献

Making an iframe responsive

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。