Tạo một iframe đáp ứng

144

Tôi đã đọc bài đăng stackoverflow này có tiêu đề "Bạn có thể tạo một iFrame phản hồi không?", Và một trong những bình luận / câu trả lời đã đưa tôi đến jfiddle này.

Nhưng khi tôi cố gắng triển khai HTML và CSS để phù hợp với nhu cầu của mình, tôi đã không có kết quả / thành công tương tự. Tôi đã tạo ra fiddle JS của riêng mình để tôi có thể chỉ cho bạn cách nó không hoạt động giống tôi. Tôi chắc chắn rằng nó có liên quan đến loại iFrame tôi đang sử dụng (ví dụ: hình ảnh sản phẩm có thể cần phải phản hồi quá hoặc một cái gì đó?)

Mối quan tâm chính của tôi là khi người đọc blog của tôi truy cập blog của tôi trên iPhone của họ, tôi không muốn mọi thứ ở độ rộng x (100% cho tất cả nội dung của tôi) và sau đó iFrame hoạt động sai và là yếu tố duy nhất rộng hơn (và do đó dính vào vượt qua tất cả các nội dung khác - nếu điều đó có ý nghĩa ??)

Dù sao, có ai biết tại sao nó không hoạt động? cảm ơn bạn.

đây là HTML & CSS của MY JSFIDDLE (nếu bạn không muốn nhấp vào liên kết):

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

và đây là CSS đi kèm:

.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%;
}
css  iframe  responsive-design 
— Brighton
nguồn
6
Bản thân iframe ('hộp') có thể phản hồi. Nhưng mọi thứ bên trong iframe là một trang riêng biệt và do đó không nằm trong miền CSS cũng như JS của bạn.
— DA.
bạn có thể sử dụng easyXDM để liên lạc giữa trang có i-frame được nhúng và tài liệu trên máy chủ mà iframe đang trỏ tới.
— john Smith
1
Tôi thích css thuần: stackoverflow.com/a/26194041/274502
— cregox

Câu trả lời:

107

Tôi giới thiệu với bạn Giải pháp mèo hát đáng kinh ngạc =)

.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/
Khi bạn di chuyển thanh cửa sổ, bạn sẽ thấy iframe thay đổi kích thước một cách đáp ứng

Ngoài ra, bạn cũng có thể sử dụng kỹ thuật tỷ lệ nội tại - Đây chỉ là một tùy chọn thay thế của cùng một giải pháp ở trên (cà chua, cà chua)

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
} 

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
— Ôi
nguồn
4
Seealso bài viết này giải thích kỹ thuật này chi tiết hơn: smashingmagazine.com/2014/02/ Khăn
— Thomas Tempelmann
chỉ hoạt động cho iframe youtube. Xem điều này: jsfiddle.net/1bd8qw76
— csandreas1
2
Kỹ thuật này sẽ hoạt động cho tất cả các iframe, mẹo là, nội dung trong iframe cũng sẽ cần phải được phản hồi, hơn nữa ở đây: benmarshall.me/responsive-iframes
— Ben Marshall
68

Hãy thử sử dụng mã này để làm cho nó phản hồi

iframe, object, embed {
    max-width: 100%;
}
— Connor Đệm Mulhall
nguồn
37
Bạn không điều chỉnh chiều cao của container với mã này.
— reggie
46

Tôi tìm thấy một giải pháp từ Dave Rupert / Chris Coyier. Tuy nhiên, tôi muốn làm cho cuộn có sẵn vì vậy tôi đã đưa ra điều này:

// 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%;
}
— Avi
nguồn
2
lưu ý trong tương lai cho tôi nếu phần đệm nội dung là tỷ lệ chiều rộng nội dung, 800x600 là% 75, 800x536 là% 67
— nerkn
1
Đây là một điểm khởi đầu tốt để làm cho iframe cuộn cho sarafi và tất cả các thiết bị. mặc dù rất buồn ....
— klewis 26/215
Đây chính xác là những gì tôi cần để cho phép iframe cuộn, vì nó dài hơn 5000px. Các mã khác buộc iFrame dài phải được phủ lên nội dung bên dưới.
— Penmas
trong 16: 9, phần đệm dưới cùng phải là 56,25%
— Sergey Sklyar
17

Bạn có thể sử dụng các thủ thuật được đề cập trên trang web này http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php .

Nó rất hữu ích và dễ hiểu. Tất cả bạn cần để tạo

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

Dưới đây là fiddle js chỉnh sửa của bạn để trình diễn.

— Thực dụng Chaudhari
nguồn
10

kiểm tra giải pháp này ... hoạt động với tôi >> 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>
— Leo Leoncio
nguồn
Tôi đã cập nhật câu đố của bạn vì có một số phần sai ở đây và đó. Nó giống nhau, và nó hoạt động như nhau nhưng không có bit khó hiểu. jsfiddle.net/6NSX3/263
— Techno.Shaman
IOS không tính toán chiều cao một cách chính xác, nó đưa thanh điều hướng vào tài khoản. Ngoài ra Iframe trên IOS không thể cuộn được.
— Tine Koloini 15/03/2016
6

DA nói đúng. Trong fiddle của riêng bạn, iframe thực sự đáp ứng. Bạn có thể xác minh rằng trong fireorms bằng cách kiểm tra kích thước hộp iframe. Nhưng một số yếu tố bên trong iframe đó không phản hồi, vì vậy chúng "ló ra" khi kích thước cửa sổ nhỏ. Ví dụ: div#products-post-wrapperchiều rộng của 8800px.

— Philip007
nguồn
5

iFrames CÓ THỂ đáp ứng HOÀN TOÀN trong khi vẫn giữ tỷ lệ khung hình của họ với một kỹ thuật CSS nhỏ gọi là Kỹ thuật tỷ lệ nội tại . Tôi đã viết một bài đăng trên blog giải quyết câu hỏi này một cách cụ thể: https://benmarshall.me/responsive-iframes/

Ý chính này là:

.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>
Mở rộng đoạn trích

BÙM, đáp ứng đầy đủ!

— Ben Marshall
nguồn
3

iframes không thể đáp ứng. Bạn có thể làm cho bộ chứa iframe phản hồi nhưng không hiển thị nội dung mà nó đang hiển thị vì đây là trang web có chiều cao và chiều rộng được đặt riêng.

Liên kết fiddle ví dụ hoạt động vì nó hiển thị một liên kết video youtube nhúng không có kích thước được khai báo.

— MGDTech
nguồn
Điều này là sai lệch. Liên kết fiddle ví dụ cũng hoạt động khi chiều rộng và chiều cao iframe youtube được chỉ định.
— Philip007
14
Tôi thất vọng vì điều này bị hạ thấp quá mức. Thông điệp anh ấy đang truyền tải rất quan trọng; iFrames rất nguy hiểm khi phản hồi nhanh vì bạn không biết khả năng phản hồi của nguồn. Vâng, Youtube là ngoại lệ. Nhưng quan điểm của ông vẫn còn hiệu lực.
— MattWithoos
3

Đơn giản, với CSS:

iframe{
width: 100%;
max-width: 800px /*this can be anything you wish, to show, as default size*/
}

Xin lưu ý : Nhưng nó sẽ không làm cho nội dung bên trong nó phản hồi!

EDIT thứ 2 :: Có hai loại iframe đáp ứng, tùy thuộc vào nội dung bên trong của chúng:

một trong đó là khi bên trong iframe chỉ chứa một video hoặc một hình ảnh hoặc nhiều vị trí theo chiều dọc, trong đó hai hàng mã CSS ở trên gần như hoàn toàn đủ và tỷ lệ khung hình có ý nghĩa ...

và cái khác là:

tiếp xúc / đăng ký loại hình thức nội dung , nơi không tỷ lệ khía cạnh làm chúng ta phải giữ, nhưng để ngăn chặn các thanh cuộn xuất hiện, và nội dung dưới chảy container. Trên thiết bị di động, bạn không thấy thanh cuộn, bạn chỉ cần cuộn cho đến khi bạn thấy nội dung (của iframe). Tất nhiên, bạn cung cấp cho nó ít nhất một số loại height, để làm cho chiều cao nội dung thích ứng với không gian dọc xảy ra trên màn hình hẹp hơn - ví dụ như với các truy vấn phương tiện:

@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 */
}
}
— Sándor Zuboly
nguồn
1
điều này thật đơn giản và tuyệt vời
— vaishali kapadia
điều này không duy trì tỷ lệ khung hình khi iframe thay đổi kích thước, tức là chiều cao vẫn giữ nguyên cho dù chiều rộng là bao nhiêu.
— ryan
@ryan Tôi đã cập nhật câu trả lời của tôi. Tôi một phần đồng ý với bạn, btw.
— Sándor Zuboly
2

Tôi nhận thấy rằng bài đăng của leowebdev dường như đã hoạt động tốt, tuy nhiên, nó đã đánh bật hai yếu tố của trang web mà tôi đang cố gắng thực hiện: cuộn và chân trang.

Việc cuộn tôi đã quay lại bằng cách thêm scrolling="yes" mã nhúng vào iframe.

Tôi không chắc liệu phần chân trang có tự động bị loại vì khả năng phản hồi hay không, nhưng hy vọng người khác biết câu trả lời đó.

— Chris Knabenshue
nguồn
2

Xóa chiều cao và chiều rộng iframe được chỉ định bằng pixel và sử dụng tỷ lệ phần trăm

iframe{  max-width: 100%;}
— Jestin
nguồn
1
Nhưng, nó đã không làm cho nội dung bên trong phản ứng.
— Vir
1 
<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}
— Saran
nguồn
1

nó đã giải quyết cho tôi bằng cách điều chỉnh mã từ @Connor Cushion Mulhall bằng

iframe, object, embed {
  width: 100%;
  display: block !important;
}
Mở rộng đoạn trích

— Savangchai Saroj
nguồn
1
Bắt đầu

Do các ràng buộc về bảo mật của trình duyệt, bạn sẽ phải bao gồm cả tệp Javascript trong trang cha mẹ của Wap, cũng như trong trang được nhúng thông qua iframe (con của con).

Trong phiên bản hiện tại, trang mẹ phải bao gồm phiên bản mới nhất của jQuery. Không có sự phụ thuộc vào jQuery cho chức năng trang con. Trong các phiên bản trong tương lai, chúng tôi cũng muốn loại bỏ sự phụ thuộc vào jQuery cho cha mẹ.

Lưu ý: tham số của xxomain tên miền trong cuộc gọi hàm makeResponsive () là tùy chọn.

Mẫu mã <!-- Activate responsiveness in the "child" page --><script src="/js/jquery.responsiveiframe.js"></script><script> var ri = responsiveIframe(); ri.allowResponsiveEmbedding();</script> <!-- Corresponding code in the "parent" page --><script src="/js/jquery.js"></script><script src="/js/jquery.responsiveiframe.js"></script><script> ;(function($){ $(function(){ $('#myIframeID').responsiveIframe({ xdomain: '*'}); }); })(jQuery);</script>
— Ahmed Elcheikh
nguồn
0

Với đánh dấu sau:

<div class="video"><iframe src="https://www.youtube.com/embed/StTqXEQ2l-Y"></iframe></div>

CSS sau đây làm cho video có độ rộng đầy đủ và 16: 9:

.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

.video > .video__iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
  }
}
— Dorian
nguồn
0

Tôi đang tìm kiếm thêm về chủ đề này và cuối cùng nhận được một câu trả lời tốt đẹp. Bạn có thể thử như thế này :

.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>
Mở rộng đoạn trích

— Vòng nguyệt quế
nguồn
0

Giải pháp tốt nhất để làm cho "iframe" phản hồi và phù hợp với tất cả các màn hình thiết bị, chỉ cần áp dụng mã này (hoạt động tốt với các trang web Trò chơi): 

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

Nếu bạn đang tìm kiếm một thùng chứa trò chơi đáp ứng phù hợp với tất cả các thiết bị, hãy áp dụng mã này sử dụng các truy vấn CSS @media nâng cao.

— Trò chơi Mizo
nguồn
Xin chào, Mã html Iframe rất đơn giản giống như thế này:
— Trò chơi Mizo
<div class = "iframe"> <iframe src = ""> </ iframe> </ div>
— Trò chơi Mizo
Trên thực tế tôi sử dụng nó với trang web của mình: Al3abMizo Games, và bạn có thể thử nó bằng cách chơi bất kỳ trò chơi nào ở bất kỳ thiết bị nào có kích thước màn hình.
— Trò chơi Mizo
0

IFrame đáp ứng đầy đủ cho các tình huống trong đó tỷ lệ khung hình không xác định và nội dung trong iFrame hoàn toàn đáp ứng.

Không có giải pháp nào ở trên hoạt động cho nhu cầu của tôi, đó là tạo ra một iFrame đáp ứng đầy đủ có nội dung động đáp ứng đầy đủ bên trong nó. Duy trì bất kỳ loại tỷ lệ khung hình nào không phải là một lựa chọn.

  1. Nhận chiều cao của thanh điều hướng của bạn và bất kỳ nội dung nào TRÊN hoặc DƯỚI iFrame. Trong trường hợp của tôi, tôi chỉ cần trừ thanh điều hướng trên cùng và tôi muốn iFrame điền xuống tận cùng của màn hình.

Mã số: 

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

Tôi cũng đã tạo thời gian chờ để thay đổi kích thước chức năng sẽ không được gọi một triệu lần.

— JPeG
nguồn
0 
For Example :

<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%;
}
— KTrivedi
nguồn
0

Kiểm tra mã đầy đủ này. bạn có thể sử dụng các container theo tỷ lệ phần trăm như mã dưới đây:

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

Kiểm tra Trang demo này .

— M. Lạch
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.