Ich habe diesen Stackoverflow-Beitrag mit dem Titel "Können Sie einen iFrame reaktionsfähig machen?" Gelesen, und einer der Kommentare / Antworten führte mich zu dieser Geige.
Aber als ich versuchte, HTML und CSS so zu implementieren, dass es meinen Anforderungen entsprach, hatte ich nicht die gleichen Ergebnisse / Erfolge. Ich habe meine eigene JS-Geige erstellt, damit ich Ihnen zeigen kann, dass es bei mir nicht genauso funktioniert. Ich bin mir sicher, dass dies etwas mit dem von mir verwendeten iFrame-Typ zu tun hat (z. B. müssen die Produktbilder möglicherweise auch reagieren oder so?)
Mein Hauptanliegen ist, dass wenn meine Blog-Leser mein Blog auf ihrem iPhone besuchen, ich nicht möchte, dass alles auf x-Breite ist (100% für alle meine Inhalte) und sich der iFrame dann schlecht verhält und das einzige Element ist, das breiter ist (und daher haftet) über alle anderen Inhalte hinaus - wenn das Sinn macht ??)
Weiß jemand, warum es nicht funktioniert? Danke.
Hier ist das HTML & CSS von MY JSFIDDLE (wenn Sie nicht auf den Link klicken möchten):
<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>
und hier ist das begleitende 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%;
}
quelle
Antworten:
Ich präsentiere Ihnen die Incredible Singing Cat Lösung =)
jsFiddle: http://jsfiddle.net/omarjuvera/8zkunqxy/2/
Wenn Sie die Fensterleiste verschieben, wird der Iframe angezeigt , um die Größe zu ändern
Alternativ können Sie auch die intrinsische Verhältnis-Technik verwenden. Dies ist nur eine alternative Option der oben genannten Lösung (Tomate, Tomate).
quelle
Versuchen Sie, diesen Code zu verwenden, damit er reagiert
quelle
Ich habe eine Lösung von Dave Rupert / Chris Coyier gefunden. Ich wollte die Schriftrolle jedoch verfügbar machen, also kam ich auf Folgendes:
// HTML
// CSS
quelle
Sie können diese auf dieser Website genannten Tricks verwenden: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php .
Es ist sehr nützlich und leicht zu verstehen. Alles was Sie brauchen, um zu erstellen
Hier ist Ihre bearbeitete js Geige zur Demonstration.
quelle
Schauen Sie sich diese Lösung an ... funktioniert für mich >> https://jsfiddle.net/y49jpdns/
quelle
quelle
DA ist richtig. In Ihrer eigenen Geige reagiert der Iframe tatsächlich. Sie können dies in Firebug überprüfen, indem Sie die Größe der Iframe-Box überprüfen. Einige Elemente in diesem Iframe reagieren jedoch nicht, sodass sie bei kleinen Fenstern "herausragen". Die
div#products-post-wrapper
Breite beträgt beispielsweise 8800px.quelle
iFrames können mit einer kleinen CSS-Technik, der so genannten Intrinsic Ratio-Technik , VOLLSTÄNDIG reagieren, während das Seitenverhältnis beibehalten wird . Ich habe einen Blog-Beitrag geschrieben, der sich speziell mit dieser Frage befasst: https://benmarshall.me/responsive-iframes/
Dieser Kern ist:
BOOM, voll ansprechbar!
quelle
iframes kann nicht reagieren. Sie können den iframe-Container reaktionsfähig machen, jedoch nicht den angezeigten Inhalt, da es sich um eine Webseite handelt, für die eine eigene Höhe und Breite festgelegt wurde.
Der Beispiel-Geigenlink funktioniert, weil er einen eingebetteten YouTube-Videolink anzeigt, für den keine Größe deklariert ist.
quelle
Einfach mit CSS:
Bitte beachten Sie : Der Inhalt wird dadurch jedoch nicht reagiert!
2. BEARBEITUNG :: Es gibt zwei Arten von responsiven Iframes, abhängig von ihrem inneren Inhalt:
Eine, bei der das Innere des Iframes nur ein Video oder ein Bild oder viele vertikal positionierte enthält, für die die obigen zwei Zeilen CSS-Code fast vollständig ausreichen und das Seitenverhältnis eine Bedeutung hat ...
und der andere ist der:
Art des Inhalts des Kontakt- / Registrierungsformulars , bei dem nicht das Seitenverhältnis beibehalten werden muss, sondern um zu verhindern, dass die Bildlaufleiste angezeigt wird und der Inhalt unter den Container fließt. Auf Mobilgeräten wird die Bildlaufleiste nicht angezeigt. Sie scrollen nur, bis Sie den Inhalt (des Iframes) sehen. Natürlich geben Sie es zumindest eine Art
height
, um die Höhe des Inhalts an den vertikalen Raum anzupassen, der auf einem schmaleren Bildschirm auftritt - mit Medienabfragen, wie zum Beispiel:quelle
Ich bemerkte, dass der Beitrag von leowebdev an meinem Ende zu funktionieren schien, jedoch zwei Elemente der Site, die ich erstellen möchte, ausschaltete: das Scrollen und die Fußzeile.
Das Scrollen habe ich durch Hinzufügen eines
scrolling="yes"
To the iframe-Einbettungscodes erhalten.Ich bin nicht sicher, ob die Fußzeile aufgrund der Reaktionsfähigkeit automatisch ausgeschaltet wird oder nicht, aber hoffentlich kennt jemand anderes diese Antwort.
quelle
Entfernen Sie die in Pixel angegebene Höhe und Breite des Iframes und verwenden Sie den Prozentsatz
quelle
quelle
Es löste mich, indem es den Code von @Connor Cushion Mulhall von anpasste
quelle
Aus Sicherheitsgründen des Browsers müssen Sie die Javascript-Datei sowohl auf der übergeordneten Seite als auch auf der Seite, die über einen Iframe (untergeordnetes Element) eingebettet wird, einfügen.
In der aktuellen Version muss die übergeordnete Seite die neueste Version von jQuery enthalten. Es gibt keine Abhängigkeit von jQuery für die Funktionalität der untergeordneten Seite. In zukünftigen Versionen möchten wir die Abhängigkeit von jQuery auch für das übergeordnete Element entfernen.
Hinweis: Der Parameter "xdomain" im Funktionsaufruf makeResponsive () ist optional.
Codebeispiel<!-- 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>
quelle
Mit folgendem Markup:
Das folgende CSS macht das Video in voller Breite und 16: 9:
quelle
Ich suche mehr zu diesem Thema und bekomme endlich eine nette Antwort. Sie können wie versuchen , diese :
quelle
Wenden Sie einfach den folgenden Code an, um einen "Iframe" ansprechbar zu machen und auf alle Gerätebildschirme zu passen (funktioniert hervorragend mit Games-Websites):
Wenn Sie nach einem reaktionsschnellen Spielecontainer suchen, der für alle Geräte geeignet ist, wenden Sie diesen Code an, der erweiterte CSS @ media-Abfragen verwendet.
quelle
Vollständig reagierender iFrame für Situationen, in denen das Seitenverhältnis unbekannt ist und der Inhalt im iFrame vollständig reagiert.
Keine der oben genannten Lösungen funktionierte für meine Anforderungen, nämlich die Erstellung eines vollständig reaktionsfähigen iFrame mit vollständig reaktionsschnellen dynamischen Inhalten. Das Beibehalten eines Seitenverhältnisses war keine Option.
Code:
Ich habe auch eine Zeitüberschreitung erstellt, damit die Funktion beim Ändern der Größe nicht millionenfach aufgerufen wird.
quelle
quelle
Schauen Sie sich diesen vollständigen Code an. Sie können die Container in Prozent wie im folgenden Code verwenden:
Schauen Sie sich diese Demoseite an.
quelle
Diese Lösung hat bei mir funktioniert. Und ich fand es einfacher. https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/
quelle