So beheben Sie Probleme bei der Größenänderung von Iframes in iOS Safari: Eine Problemumgehung für eine konsistente Anzeige?

Iframe-Größe auf iOS: Behebung der Größenänderungsanomalie in Safari

In bestimmten Szenarien werden Iframes mit übermäßigem Inhalt auf iOS-Geräten möglicherweise falsch angezeigt. Im Gegensatz zu anderen Browsern, die ein Überlaufen und Scrollen von Inhalten ermöglichen, passt Safari unter iOS die Größe des Iframes automatisch an seinen Inhalt an.

Dieses Verhalten widerspricht der Absicht, die Iframe-Größe über CSS zu steuern. Um dieses Problem zu beheben und eine konsistente Iframe-Größe auf allen Plattformen sicherzustellen, muss eine Problemumgehung implementiert werden.

Lösung: Überlaufeindämmung

Durch Hinzufügen eines zusätzlichen div-Elements mit spezifischem CSS Mit den Eigenschaften können Sie den Iframe dazu zwingen, seine beabsichtigten Abmessungen beizubehalten, und Überlauf-Bildlauf aktivieren. Hier ist der geänderte HTML-Code:

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

Und das entsprechende CSS:

<code class="css">.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
}

.wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

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

Das .wrapper-Div führt overflow: auto; ein, das vertikales Scrollen innerhalb des Wrapper-Divs ermöglicht, und - webkit-overflow-scrolling: touch;, eine Webkit-spezifische Eigenschaft, die die Scrollleistung auf iOS-Geräten optimiert.

Mit dieser Problemumgehung bleibt die Größe des Iframes erhalten und sorgt so für eine konsistente und angemessene Benutzererfahrung sowohl auf iOS als auch auf iOS-Geräten Nicht-iOS-Geräte.

Das obige ist der detaillierte Inhalt vonSo beheben Sie Probleme bei der Größenänderung von Iframes in iOS Safari: Eine Problemumgehung für eine konsistente Anzeige?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!