Wie behebe ich Probleme mit der Iframe-Größe auf iOS-Geräten mithilfe von CSS?

Beheben von Iframe-Größenproblemen unter iOS mithilfe von CSS

Bei der Anzeige von Iframes auf iOS-Geräten kann es zu inkonsistentem Verhalten kommen, insbesondere wenn der Iframe-Inhalt die angegebene Größe überschreitet zugewiesener Rahmenplatz. Während andere Browser Overflow-Scrollen ermöglichen, ändert Safari unter iOS unerwartet die Größe des Rahmens, um den überschüssigen Inhalt aufzunehmen. Diese Abweichung vom gewünschten Verhalten kann durch CSS-Änderungen behoben werden.

Lösung:

Um dieses Problem zu beheben und ein konsistentes Iframe-Verhalten auf allen Geräten sicherzustellen, kann der folgende CSS-Code verwendet werden hinzugefügt:

<code class="css">.frame_holder {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}</code>

Hier ist das geänderte HTML und CSS:

<code class="html"><div class="frame_holder">
  <iframe class="my_frame">
    // The content
  </iframe>
</div></code>

<code class="css">body {
  position: relative;
  background: #f0f0f0;
}

.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.my_frame {
  width: 100%;
  height: 100%;
  border: 1px solid #e0e0e0;
}</code>

Erklärung:

Die hinzugefügten CSS-Stile führen zwei ein wichtige Eigenschaften:

• overflow: auto; Ermöglicht es dem übergeordneten Container, überlaufenden Inhalt aufzunehmen, indem bei Bedarf Bildlaufleisten hinzugefügt werden.
• -webkit-overflow-scrolling: touch; ist eine herstellerspezifische Eigenschaft für iOS-Geräte. Dadurch wird sichergestellt, dass der Touch-Scrolling-Mechanismus für den übergeordneten Container verwendet wird, was ein reibungsloses Scrollen unter iOS ermöglicht.

Durch die Einbindung dieser CSS-Änderungen behält der Iframe seine angegebenen Abmessungen bei und ermöglicht gleichzeitig ein elegantes Überlaufscrollen iOS-Geräte.

Das obige ist der detaillierte Inhalt vonWie behebe ich Probleme mit der Iframe-Größe auf iOS-Geräten mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!