Bagaimana untuk Mengawal Saiz iframe pada iOS dengan CSS?

Kawalan Saiz iframe iOS dengan CSS

Jika anda menggunakan iframe dengan kandungan yang melebihi saiz bingkainya, anda mungkin melihat tingkah laku yang tidak dijangka pada iOS. Tidak seperti penyemak imbas lain, Safari pada iOS mengubah saiz bingkai untuk menampung kandungan limpahan.

Pertimbangkan struktur HTML berikut:

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

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

Dihidupkan iOS, iframe akan mengubah saiz agar sesuai dengan kandungan, mengabaikan ketinggian CSS yang ditentukan. Untuk mengelakkan ini, seseorang mesti menambah div pembalut dengan CSS berikut:

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

HTML dan CSS yang dikemas kini:

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

Penyelesaian ini menambah lapisan kawalan tambahan dan memaksa bingkai untuk mematuhi dimensi CSS yang ditentukan, memastikan gelagat yang konsisten merentas semua penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Mengawal Saiz iframe pada iOS dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!