Wie bekomme ich iframe Breite 100% in iPhone-Porträt-Ansicht

Grundsätzlich habe ich das gleiche Problem wie here, aber weil er nie eine gute Antwort bekam ich Reposting die Frage.Wie bekomme ich iframe Breite 100% in iPhone-Porträt-Ansicht

Also das Problem ist, dass nur in iPhone Safari die width="100%" auf der Hochformatansicht scheint sich schlecht benehmen und geben Sie dem IFrame die Querformatbreite. Und ich kann nicht herausfinden, was hier vor sich geht.

Ich bin mit dem richtigen Ansichtsfenster:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />

Und die Stelle innerhalb des IFrame kann tatsächlich gehen weit enger als 320px und hat auch die gleichen Ansichtsfenster definiert. (Ich habe auf einer der ähnlichen Fragen gelesen, dass dies ein Faktor sein kann, damit ich nur klärere).

Im Debugger kann ich sehen, dass, bevor die URL hinzugefügt wurde, die offsetWidth des iFrames war 304px, die korrekt ist und nach der Belastung war 588px, die für die Landschaftsansicht korrekt ist. Aber warum hat es sich geändert? Ich habe keine Ahnung. Die Seite innerhalb des IFrame kommt aus einer anderen Domäne, so dass sie dies nicht beeinflussen konnte und die Hauptseite nichts mit der Breite des Iframes macht.

Das iPhone verwende ich ein iPhone 5 iOS 7.0.2

PS. Bitte posten Sie keine JS-Antworten, bei denen Sie den Iframe bei der Größenanpassung des Fensters manuell ändern, ich suche derzeit nach einem nicht-JS-Fix, und dies ist meine letzte Option, die ich verwenden möchte. Bitte auch nicht die @ media CSS-Antwort posted, wenn Sie min-width bis 320px auf iPhone Hochformat Breite eingestellt, das würde für mich aus verschiedenen Gründen nicht funktionieren.

Quelle

2013-11-21 Idra

OK so nach Stunden Debuggen ich endlich die Lösung gefunden war ich nach, aber unfortunatelyit ist keine reine CSS-Lösung:

Die CSS Sie anwenden müssen, ist dies:

iframe { 
     min-width: 100%; 
     width: 100px; 
     *width: 100%; 
    }

Wenn Sie eingestellt Wenn die Breite kleiner als die Hochformat-Breite ist und die Mindestbreite auf 100% gesetzt wird, dann erhältst du width: 100%, aber diesmal eine Version, die tatsächlich funktioniert und jetzt nimmt der Iframe die tatsächliche Containerbreite und nicht die Querformatbreite. Die *width: 100%; ist da so, dass in IE6 die Breite immer noch 100% wäre.

Dies funktioniert jedoch nur mit dem Iframe-Attribut scrolling="no", wenn das Scrollen erlaubt ist, dann funktioniert es nicht mehr. Dies könnte in einigen Fällen die Nützlichkeit einschränken.

Quelle

2013-11-22 10:14:20 Idra

Ein bisschen alt, aber es gibt eine Lösung für die 'scrolling =" no "' Problem hier: http://StackOverflow.com/Questions/23083462/How-to-get-an-iframe-to-be-responsive-in-ios-safari#answer-23083463 – pnichols

@pnichols ja ich weiß, dass ist, als ich angefangen habe, dieses Problem zu verstehen und alle möglichen Lösungen gefunden habe. Das ursprüngliche Problem besteht darin, dass iOS das iFrames-Seamless-Attribut standardmäßig auf TRUE setzt und es nicht überschrieben werden kann. Ich dachte darüber nach, diese Frage zu modifizieren, aber in Meta wurde mir gesagt, dass ich diese Frage und die Antwort so ändern müsste, dass es besser ist, eine neue Frage zu stellen.Wenn Sie dieses Problem haben, überprüfen Sie die anderen Q & A, die ich gemacht habe, und es wird erklärt, wann dieses Problem auftritt und wie es zu lösen ist und wann das scrolling = "no" 'wirklich benötigt wird und wann Sie es weglassen können. – Idra

Es wird hier beantwortet: iframe size with CSS on iOS

einfach wickeln Sie Ihre iframe in einem div mit:

overflow: auto; 
-webkit-overflow-scrolling:touch;

http://jsfiddle.net/R3PKB/7/

Quelle

2014-06-08 22:24:51

Nun, das ist die Standardmethode, mit der Sie das Seamless-Attribut loswerden und es möglich machen, den Iframe-Inhalt in iOS Safari zu scrollen, aber die Frage war, wie man den Iframe auf das Container-Element ohne Bildlaufleisten bringen kann – Idra

Wie bekomme ich iframe Breite 100% in iPhone-Porträt-Ansicht

Antwort

Verwandte Themen