Wie mache ich IFrames in iOS Safari reaktionsfähig, auch mit internen Bildlaufleisten?

IFrames in iOS Safari responsiv machen

Problembeschreibung

Das Integrieren von Inhalten in eine Website mithilfe von IFrames erfordert, dass die IFrames responsiv sind. Einfache CSS-Lösungen wie das Festlegen der Iframe-Breite auf 100 % reichen möglicherweise nicht aus. Das Erreichen der Reaktionsfähigkeit wird jedoch besonders schwierig, wenn der Iframe-Inhalt über interne Bildlaufleisten verfügt.

Responsive IFrames mit Bildlaufbereichen

Um IFrames in iOS Safari reaktionsfähig zu machen, auch wenn der Inhalt Bildlaufbereiche enthält, müssen Sie Sie haben zwei Möglichkeiten:

Option 1: Ändern Sie die Inhalt

1. Setzen Sie die Breite des scrollbaren Bereichs (z. B. div#ScrolledArea) im Iframe-Inhalt auf:

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

2. Dies zwingt iOS Safari dazu Passen Sie die Größe des Iframes richtig an, damit der Bildlaufbereich funktioniert.

Option 2: Ändern Sie die iframe

1. Wenn Sie keinen Zugriff auf den Iframe-Inhalt haben, können Sie das folgende CSS auf den Iframe selbst anwenden:

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

2. Sie müssen jedoch das Scrollen im Iframe deaktivieren, indem Sie scrolling="no" hinzufügen HTML:

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

Hinweis

In Option 2 verhindert das Deaktivieren des Scrollens im Iframe, dass Sie den Scrollbereich im Iframe-Inhalt verwenden können. Wenn Sie jedoch den Iframe-Inhalt ändern (Option 1), können Sie die Scroll-Funktionalität beibehalten.

Das obige ist der detaillierte Inhalt vonWie mache ich IFrames in iOS Safari reaktionsfähig, auch mit internen Bildlaufleisten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!