使iframe响应

Question

使iframe响应当我尝试实现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%;}

Answer 1

尝试使用此代码使其响应

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

Answer 2

我找到了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%;}