使 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。