Wie steuere ich die Iframe-Größe unter iOS mit CSS?

iOS-iFrame-Größenkontrolle mit CSS

Wenn Sie einen Iframe mit Inhalten verwenden, der seine Framegröße überschreitet, bemerken Sie möglicherweise unerwartetes Verhalten auf iOS. Im Gegensatz zu anderen Browsern passt Safari unter iOS die Rahmengröße an, um den überlaufenden Inhalt aufzunehmen.

Beachten Sie die folgende HTML-Struktur:

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

Und CSS:

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

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

Ein iOS: Die Größe des Iframes wird an den Inhalt angepasst, wobei die angegebene CSS-Höhe ignoriert wird. Um dies zu verhindern, muss man ein Wrapping-Div mit dem folgenden CSS hinzufügen:

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

Das aktualisierte HTML und CSS:

<code class="html"><div class="frame_holder">
  <div style="overflow: auto; -webkit-overflow-scrolling: touch;">
    <iframe class="my_frame"></iframe>
  </div>
</div></code>

Diese Lösung fügt eine zusätzliche Kontrollebene hinzu und erzwingt das Rahmen, um die angegebenen CSS-Abmessungen einzuhalten und so ein konsistentes Verhalten in allen Browsern sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie steuere ich die Iframe-Größe unter iOS mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!