Bagaimana untuk Membetulkan Isu Saiz Semula Iframe pada iOS Safari: Penyelesaian untuk Paparan Konsisten?

Saiz Iframe pada iOS: Membetulkan Anomali Saiz Saiz Safari

Dalam senario tertentu, iframe yang mengandungi kandungan berlebihan mungkin dipaparkan secara tidak betul pada peranti iOS. Tidak seperti penyemak imbas lain yang membenarkan limpahan kandungan dan menatal, Safari pada iOS mengubah saiz iframe secara automatik agar sesuai dengan kandungannya.

Tingkah laku ini menentang niat untuk mengawal saiz iframe melalui CSS. Untuk menangani isu ini dan memastikan saiz iframe yang konsisten merentas platform, adalah perlu untuk melaksanakan penyelesaian.

Penyelesaian: Pengekalan Limpahan

Dengan menambahkan elemen div tambahan dengan CSS tertentu sifat, anda boleh memaksa iframe untuk mengekalkan dimensi yang dimaksudkan dan membolehkan penatalan limpahan. Berikut ialah kod HTML yang diubah suai:

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

Dan CSS yang sepadan:

<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>

Div .wrapper memperkenalkan limpahan: auto;, yang membolehkan tatal menegak dalam div pembalut, dan - webkit-overflow-scrolling: touch;, sifat khusus webkit yang mengoptimumkan prestasi menatal pada peranti iOS.

Dengan penyelesaian ini, saiz iframe akan dikekalkan, memberikan pengalaman pengguna yang konsisten dan sesuai pada kedua-dua iOS dan peranti bukan iOS.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Isu Saiz Semula Iframe pada iOS Safari: Penyelesaian untuk Paparan Konsisten?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!