it-swarm.asia

جعل iframe استجابة

كنت أقرأ هذا المنشور stackoverflow بعنوان "هل تستطيع أن تجعل iFrame متجاوبًا؟" ، وأدى لي أحد التعليقات/الإجابات إلى هذا jfiddle.

ولكن عندما حاولت تطبيق HTML و CSS لتناسب احتياجاتي ، لم يكن لدي نفس النتائج/النجاح. لقد خلقت كمان JS الخاص بي حتى أتمكن من إطلاعك على كيف أنه لا يعمل بنفس الطريقة بالنسبة لي. أنا متأكد من أن لها علاقة بنوع iFrame الذي أستخدمه (على سبيل المثال ، قد تحتاج صور المنتج إلى الاستجابة أيضًا أو إلى شيء ما؟)

شاغلي الرئيسي هو أنه عندما يزور قراء مدونتي مدونتي على iPhone الخاص بهم ، لا أريد أن يكون كل شيء بعرض x (100٪ لكل المحتوى الخاص بي) ومن ثم يسيء سلوك iFrame وهو العنصر الوحيد الأوسع (وبالتالي العصي) تجاوز جميع المحتويات الأخرى - إذا كان ذلك منطقيًا؟)

على أي حال ، هل يعرف أحد لماذا لا يعمل؟ شكرا جزيلا.

إليك HTML & CSS الخاص بـ JSFIDDLE (إذا كنت لا ترغب في النقر على الرابط):

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

أقدم لكم قط الغناء المذهل الحل =)

.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%;
  position: relative;
} 

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
84
Omar

حاول استخدام هذا الرمز لجعله مستجيبًا

iframe, object, embed {
    max-width: 100%;
}
68
Connor Cushion Mulhall

لقد وجدت حلاً من 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%;
}
43
Avi

يمكنك استخدام هذه الحيل المذكورة في هذا الموقع 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%;
}

هنا هو تحرير الخاص بك شبيبة كمان للمظاهرة.

16
Pragnesh Chaudhari
iframe{
  max-width: 100% !important;
}
10
Christian Michael

تحقق من هذا الحل ... يعمل بالنسبة لي >> 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>
9
Leo Leoncio

دا هو الصحيح. في الكمان الخاص بك ، فإن iframe يستجيب بالفعل. يمكنك التحقق من ذلك في firebug عن طريق التحقق من تحجيم مربع iframe. لكن بعض العناصر الموجودة في إطار iframe ليست سريعة الاستجابة ، لذلك "ينفجر" عندما يكون حجم النافذة صغيرًا. على سبيل المثال ، عرض div#products-post-wrapper هو 8800 بكسل.

6
Philip007

يمكن أن تكون iFrames سريعة الاستجابة مع الحفاظ على نسبة العرض إلى الارتفاع الخاصة بها باستخدام تقنية CSS صغيرة تسمى نسبة النسب الداخلية . كتبت منشورًا يتناول هذا السؤال على وجه التحديد: https://benmarshall.me/responsive-iframes/

هذا Gist هو:

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

BOOM ، تستجيب بالكامل!

3
Ben Marshall

لقد لاحظت أن وظيفة leowebdev يبدو أنها تعمل على نهايتي ، ومع ذلك ، فقد تسبب في اثنين من عناصر الموقع الذي أحاول القيام به: التمرير وتذييل الصفحة.

التمرير عدت بإضافة scrolling="yes" إلى كود تضمين iframe.

لست متأكدًا مما إذا كان قد تم تذييل الصفحة تلقائيًا بسبب الاستجابة أم لا ، ولكن نأمل أن يعرف شخص آخر هذه الإجابة.

2
Chris Knabenshue

إزالة iframe الطول والعرض المحدد بالبكسل واستخدام النسبة المئوية

iframe{  max-width: 100%;}
2
Jestin

بسيط ، مع CSS:

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

من فضلك ، لاحظ : لكنه لن يجعل المحتوى داخله يستجيب!

2
iorgu
<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

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

حلها عن طريق تعديل التعليمات البرمجية منConnor Cushion Mulhall بواسطة

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

عملت هذا الحل بالنسبة لي. ووجدتها أسهل. https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/

0
Vishwas Gagrani

iframes لا يمكن أن تستجيب. يمكنك جعل حاوية iframe متجاوبة ولكن ليس المحتوى الذي يتم عرضه لأنه صفحة ويب بها ارتفاعها وعرضها.

يعمل مثال رابط الكمان لأنه يعرض رابط فيديو يوتيوب مضمن وليس له حجم معلن.

0
MGDTech

أفضل حل لجعل "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}}

إذا كنت تبحث عن حاوية ألعاب سريعة الاستجابة تناسب جميع الأجهزة ، فقم بتطبيق هذا الرمز الذي يستخدم استعلامات CSSmedia المتقدمة.

0
Al3abMizo Games
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%;
}
0
KTrivedi

أنا أبحث عن المزيد حول هذا الموضوع وأخيراً أحصل على إجابة لطيفة. يمكنك تجربة مثل هذا :

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

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

لقد قمت أيضًا بإنشاء مهلة حتى لا يتم استدعاء الدالة على تغيير حجم المليون مرة.

0
JPeG

مع الترميز التالي:

<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;
  }
}
0
Dorian

تحقق من هذا الرمز الكامل. يمكنك استخدام الحاويات في النسب المئوية مثل الرمز أدناه:

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

تحقق من هذه الصفحة الصفحة التجريبية.

0
M. Lak