Warum funktioniert mein responsiver IFrame in iOS Safari nicht?

So machen Sie einen IFrame in iOS Safari responsiv

Beim Einbinden von Inhalten in eine Website mithilfe eines IFrames ist es entscheidend, dass der IFrame erhalten bleibt seine Reaktionsfähigkeit. Während es einfach erscheinen mag, die Breite des IFrames mithilfe von HTML oder CSS auf 100 % festzulegen, stellt iOS Safari einzigartige Herausforderungen dar.

Responsiver IFrame mit externem Scrollen

Wenn die IFrames Der Inhalt reagiert vollständig und erfordert keine internen Bildlaufleisten. iOS Safari passt die Größe des IFrames automatisch an Probleme.

Responsive IFrame mit internem Scrollen

Es treten jedoch Probleme auf, wenn der IFrame-Inhalt horizontale Scrollbereiche enthält. iOS Safari ändert die Größe des IFrames, um sicherzustellen, dass diese Bildlaufbereiche vollständig sichtbar sind, und ignoriert die Überlaufeinstellungen.

Lösungen

Um dieses Problem zu beheben, gibt es zwei Lösungen:

Ändern Sie den IFrame Inhalt:

1. Setzen Sie die Breite des scrollenden Div innerhalb des IFrame-Inhalts (z. B. div#ScrolledArea) auf:

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

2. Dies stellt sicher, dass die Breite des Divs kleiner ist als die Breite des IFrames, ermöglicht ihm aber dennoch, 100 % des verfügbaren Platzes zu belegen Leerzeichen.

Ändern Sie das IFrame-Element:

1. Wenn Sie keinen Zugriff auf den IFrame-Inhalt haben, können Sie das anwenden gleiches CSS für den IFrame selbst:

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

2. Deaktivieren Sie außerdem die Bildlaufleisten auf dem IFrame unter Verwendung des scrolling="no"-Attributs.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein responsiver IFrame in iOS Safari nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!