Bagaimanakah Saya Boleh Membetulkan Masalah Responsif IFrame dalam iOS Safari?

Menyelesaikan Isu Responsif IFrame dalam iOS Safari

Penggunaan IFrames untuk menyepadukan kandungan luaran ke dalam tapak web sering menimbulkan cabaran dalam mengekalkan responsif pada peranti moden . Isu ini menjadi sangat ketara dalam iOS Safari, di mana IFrames mungkin gagal menyesuaikan saiznya sepenuhnya.

Untuk mengatasi isu ini, kita mesti memahami punca asasnya terlebih dahulu. Apabila kandungan IFrame mempunyai bar skrol dalaman, penyemak imbas iOS Safari secara automatik melaraskan saiz IFrame untuk menampung keseluruhan kandungan bar skrol. Tingkah laku ini bercanggah dengan tindak balas yang diingini.

Penyelesaian

Terdapat dua pendekatan berkesan untuk menangani isu ini:

1. Mengubah suai Kandungan IFrame

Jika anda mempunyai kawalan ke atas kandungan IFrame terbenam (iaitu, Content.html), anda boleh mengubah suai CSS kawasan penatalan (div#ScrolledArea):

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

CSS ini menetapkan lebar minimum, memastikan IFrame tidak pernah melebihi port pandangan lebar. Nilai lebar min dan *lebar mengatasi kelakuan lalai iOS Safari.

2. Mengubah suai Elemen IFrame

Jika anda tidak boleh mengakses kandungan IFrame, anda boleh memanipulasi elemen IFrame itu sendiri:

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

Walau bagaimanapun, kaedah ini memerlukan bar skrol dilumpuhkan pada IFrame menggunakan atribut scrolling="no":

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

Semasa melumpuhkan bar skrol adalah perlu, mengubah suai kandungan IFrame kekal sebagai penyelesaian pilihan untuk mengekalkan bar skrol dalam IFrame.

Kedua-dua penyelesaian memastikan bahawa lebar IFrame adalah responsif dan kawasan penatalan berfungsi seperti yang dimaksudkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membetulkan Masalah Responsif IFrame dalam iOS Safari?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!