Bagaimana untuk Membetulkan Isu Saiz Iframe pada Peranti iOS Menggunakan CSS?

Membetulkan Isu Saiz iframe pada iOS Menggunakan CSS

Tingkah laku tidak konsisten boleh timbul apabila memaparkan iframe pada peranti iOS, terutamanya apabila kandungan iframe melebihi kandungannya ruang bingkai yang diperuntukkan. Walaupun pelayar lain membenarkan penatalan limpahan, Safari pada iOS secara tidak dijangka mengubah saiz bingkai untuk menampung kandungan berlebihan. Penyimpangan daripada tingkah laku yang diingini ini boleh ditangani melalui pengubahsuaian CSS.

Penyelesaian:

Untuk menyelesaikan isu ini dan memastikan tingkah laku iframe yang konsisten merentas peranti, kod CSS berikut boleh ditambah:

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

Berikut ialah HTML dan CSS yang diubah suai:

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

Penjelasan:

Gaya CSS yang ditambah memperkenalkan dua sifat penting:

• limpahan: auto; membolehkan bekas induk untuk menampung kandungan yang melimpah dengan menambahkan bar skrol seperti yang diperlukan.
• -webkit-overflow-scrolling: touch; ialah harta khusus vendor untuk peranti iOS. Ia memastikan mekanisme penatalan sentuh digunakan untuk bekas induk, membolehkan penatalan lancar pada iOS.

Dengan menggabungkan pengubahsuaian CSS ini, iframe akan mengekalkan dimensi yang ditentukan sambil membenarkan penatalan limpahan anggun pada Peranti iOS.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Isu Saiz Iframe pada Peranti iOS Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!