Wie mache ich iFrames in iOS Safari responsiv?

Responsive iFrames in iOS Safari

Bei der Integration von Inhalten mithilfe von iFrames in iOS Safari kann das Erreichen der Reaktionsfähigkeit eine Herausforderung darstellen, insbesondere wenn der Inhalt des iFrames Folgendes enthält horizontale Bildlaufbereiche.

iOS-Standard Verhalten

Wenn der Inhalt des iFrame vollständig reagiert und seine Größe ohne Verwendung interner Bildlaufleisten angepasst werden kann, passt iOS Safari die Größe des iFrame entsprechend an.

Überlaufproblem

Das Hinzufügen von overflow: scroll zum Inhalt des iFrames kann dieses Verhalten jedoch stören. Wenn dies geschieht, passt iOS Safari automatisch die Größe des iFrame an, um den überlaufenden Inhalt sichtbar zu machen.

Lösungen

• Ändern des iFrame-Inhalts : Legen Sie die Breite des überlaufenden Div fest (z. B. #ScrolledArea) zu:

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

  Dadurch wird iOS Safari gezwungen, den Wert für die Mindestbreite zu respektieren und sicherzustellen, dass die Breite des Divs mit der Breite des iFrames übereinstimmt.

• Ändern des iFrames : Wenn Sie keinen Zugriff auf den Inhalt des iFrames haben, wenden Sie dasselbe CSS auf den iFrame an selbst:

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

  Damit dies funktioniert, müssen Sie die Bildlaufleisten mit scrolling="no" auf dem iFrame deaktivieren.

Durch die Implementierung einer dieser Lösungen, Sie können in iOS Safari reaktionsfähige iFrames erzielen, auch wenn deren Inhalt horizontales Scrollen erfordert.

Das obige ist der detaillierte Inhalt vonWie mache ich iFrames in iOS Safari responsiv?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!