Wie kann ich dafür sorgen, dass responsive IFrames in iOS Safari ordnungsgemäß funktionieren?

Responsive IFrames in iOS Safari

Im modernen Web sind responsive IFrames für die nahtlose Integration von Inhalten in Websites unerlässlich. Während es theoretisch ausreichen sollte, die IFrame-Breite auf 100 % zu setzen, kann dieser Ansatz in der Praxis zu Problemen in iOS Safari führen.

Herausforderungen

Wenn der Inhalt eines IFrames hat Mit den internen Bildlaufleisten passt iOS Safari die Größe des IFrames automatisch an, um den scrollbaren Bereich vollständig anzuzeigen, auch wenn die IFrame-Breite auf 100 % eingestellt ist. Dieses Verhalten kann dazu führen, dass der übergelaufene Inhalt maskiert wird.

Lösung

Um dieses Problem zu beheben und die IFrame-Reaktionsfähigkeit in iOS Safari sicherzustellen, gibt es zwei Optionen:

Option 1: IFrame-Inhalt ändern

Wenn Sie den Inhalt kontrollieren Ändern Sie im IFrame das CSS des Divs mit Überlauf: Scrollen Sie zu Folgendem:

width: 1px;
min-width: 100%;
*width: 100%;

Diese Technik überschreibt das Standardverhalten von iOS Safari und erzwingt die Breite des Divs auf 100 %, sodass der Überlauf ausgeblendet werden kann.

Option 2: IFrame selbst ändern

Beim Ändern des IFrame-Inhalte sind nicht möglich. Sie können dasselbe CSS auf den IFrame selbst anwenden:

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

Diese Option erfordert jedoch das Deaktivieren der Bildlaufleisten auf dem IFrame mit scrolling="no":

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

Fazit

Indem Sie eine der bereitgestellten Lösungen befolgen, können Sie sicherstellen, dass IFrames in iOS weiterhin reagieren Safari, während horizontal scrollende Bereiche innerhalb ihres Inhalts berücksichtigt werden.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass responsive IFrames in iOS Safari ordnungsgemäß funktionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!