it-swarm.com.de

iframe Größe mit CSS unter iOS

Es gibt einen iframe, der im Grunde genommen mehr Inhalt hat, als in den Frame passt. Die Größe des Rahmens richtet sich nach der Größe des Browser-Bildschirms und lässt den Überlauf scrollen, was mit Ausnahme von iOS auf allen Browsern einwandfrei funktioniert. Unter iOS beschließt Safari, die Größe des Frames an den Inhalt anzupassen. Nicht das, was Sie erwarten würden.

Beispielcode für jsFiddle:
http://jsfiddle.net/R3PKB/2/

Probieren Sie es auf Ihren iOS-Geräten aus:
http://jsfiddle.net/R3PKB/2/embedded/result

Der HTML:

<div class="frame_holder">
  <iframe class="my_frame">
    // The content
  </iframe>
</div>

Das CSS:

body {
  position: relative;
  background: #f0f0f0;
}

.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
}

.my_frame {
  width: 100%;
  height: 100%;
  border: 1px solid #e0e0e0;
}
45
Guido Bouman

Sie können es zum Laufen bringen, indem Sie ein Wrapping Div mit overflow: auto; Und -webkit-overflow-scrolling:touch; Hinzufügen. Hier ist Ihr Beispiel dafür: http://jsfiddle.net/R3PKB/7/

Laut vorherigen Fragen zu SO ist es ein Fehler seit iOS 4. Ich habe hier weitere Informationen gefunden: https://stackoverflow.com/a/6721310/1047398 - Problem beim Zuschneiden von Iframe-Inhalten auf iOS (iPad)

50
nvreez

Dies ist eine alte Frage, aber da sie bei Google an erster Stelle steht und das Problem bei heutigen iOS-Geräten besteht, veröffentliche ich eine bessere Lösung, die ich auf dieser Seite gefunden habe: Wie bekomme ich einen IFrame, der in iOS Safari reagiert?

Wenn Sie einen iframe mit scroll ( haben, sagen wir ein Twitter-Widget ), funktioniert die obige Lösung grundsätzlich nicht sehr gut, da das übergeordnete Element scrollbar ist . Das Update, das bei mir funktioniert hat, ersetzt height: 100% mit height: 1px; min-height: 100%;.

10
Andrei Cojea

Wenn iOS Safari Ihren Iframe-Inhalt von einem anderen Ursprung als erwartet anzeigt (d. H. Um einige Pixel verschoben), fügen Sie dem Iframe scrolling="no" Als Attribut hinzu. Dies sollte verhindern, dass der Inhalt automatisch angepasst wird.

Mehr hier.

7
Kyle Dumovic

mit height: 1px; min-height: 100%; hat bei mir nicht funktioniert, obwohl ich kein scrollendes Element brauchte. Ich musste das overflow:auto; auf einem umgebenden div statt. Beachten Sie, dass von dieser Methode abgeraten wird, da sie möglicherweise unbeabsichtigte Folgen hat. Ich habe sie jedoch auf Android/iOS- und Desktop-Browsern getestet und konnte noch keine Probleme feststellen. Daumen drücken .

Dies ist ein netter Beitrag von Andy Shora über einige iOS iframe -Nuancen: http://andyshora.com/iframes-responsive-web-apps-tips.html

1
Chrispy