Mengapa IFrame Responsif Saya Tidak Berfungsi dalam Safari iOS?

Cara Membuat IFrame Responsif dalam iOS Safari

Apabila memasukkan kandungan ke dalam tapak web menggunakan IFrame, adalah penting untuk IFrame mengekalkan tindak balasnya. Walaupun kelihatan mudah untuk menetapkan lebar IFrame kepada 100% menggunakan HTML atau CSS, iOS Safari memberikan cabaran unik.

IFrame Responsif dengan Tatal Luaran

Jika IFrame kandungan responsif sepenuhnya, tanpa memerlukan bar skrol dalaman, iOS Safari akan mengubah saiz secara automatik IFrame tanpa isu.

IFrame Responsif dengan Tatal Dalaman

Walau bagaimanapun, isu timbul apabila kandungan IFrame mengandungi kawasan tatal mendatar. iOS Safari mengubah saiz IFrame untuk memastikan kawasan tatal ini kelihatan sepenuhnya, mengabaikan tetapan limpahan.

Penyelesaian

Untuk menangani masalah ini, terdapat dua penyelesaian:

Ubah suai IFrame Kandungan:

1. Tetapkan lebar div menatal dalam kandungan IFrame (cth., div#ScrolledArea) kepada:

   width: 1px;
   min-width: 100%;
   *width: 100%;

2. Ini memastikan bahawa lebar div lebih kecil daripada lebar IFrame tetapi masih membenarkan ia untuk menduduki 100% ruang yang ada.

Ubah suai Elemen IFrame:

1. Jika anda tidak mempunyai akses kepada kandungan IFrame, anda boleh menggunakan CSS yang sama pada IFrame itu sendiri:

   iframe {
       width: 1px;
       min-width: 100%;
       *width: 100%;
   }

2. Selain itu, lumpuhkan bar skrol pada IFrame menggunakan atribut scrolling="no".

Atas ialah kandungan terperinci Mengapa IFrame Responsif Saya Tidak Berfungsi dalam Safari iOS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!