So beheben Sie Probleme bei der Größenänderung von Iframes unter iOS: Eine CSS-Lösung?

Überwindung des Iframe-Größenänderungsproblems auf iOS mithilfe von CSS

Wenn Sie trotz allem auf das Problem stoßen, dass ein Iframe die festgelegte Framegröße überschreitet Wenn es in anderen Browsern korrekt funktioniert, bietet dieses Handbuch eine Lösung.

Kurz gesagt missachtet iOS Safari herkömmliche, mit CSS festgelegte Iframe-Größenbeschränkungen, was dazu führt, dass die Größe des Iframes an seinen Inhalt angepasst wird. Um dieses Problem zu lösen, verwenden wir ein Wrapper-Div, das den Überlauf reguliert:

<code class="css"><div class="frame_wrapper">
    <iframe class="my_frame">
        // Content
    </iframe>
</div></code>

Die folgenden CSS-Eigenschaften werden auf das Wrapper-Div angewendet:

<code class="css">.frame_wrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* Additional CSS styles... */
}</code>

Die Overflow-Eigenschaft steuert die Behandlung von Überläufen Wenn Sie den Inhalt auf „Automatisch“ setzen, werden bei Bedarf Bildlaufleisten angezeigt. Die Eigenschaft -webkit-overflow-scrolling ist spezifisch für iOS-Geräte und ermöglicht ein elegantes Scrollerlebnis.

Durch die Kapselung des Iframes in diesem Wrapper-Div steuern wir das Überlaufverhalten und weisen iOS Safari an, die gewünschten Iframe-Abmessungen einzuhalten . Sie können sich das aktualisierte Beispiel hier ansehen: http://jsfiddle.net/R3PKB/7/

Diese Lösung behebt einen seit langem bestehenden Fehler in der Iframe-Verarbeitung von iOS Safari, wie in früheren Diskussionen zum Stapelüberlauf bestätigt.

Das obige ist der detaillierte Inhalt vonSo beheben Sie Probleme bei der Größenänderung von Iframes unter iOS: Eine CSS-Lösung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!