Bagaimanakah Saya Boleh Membuat IFrames Responsif Berfungsi dengan Baik dalam Safari iOS?

IFrames Responsif dalam iOS Safari

Dalam web moden, IFrames responsif adalah penting untuk penyepaduan kandungan yang lancar ke dalam tapak web. Walaupun secara teori, menetapkan lebar IFrame kepada 100% sudah memadai, dalam praktiknya, pendekatan ini mungkin menghadapi masalah dalam iOS Safari.

Cabaran

Apabila kandungan IFrame mempunyai bar skrol dalaman, iOS Safari secara automatik mengubah saiz IFrame untuk memaparkan sepenuhnya kawasan boleh tatal, walaupun jika Lebar IFrame ditetapkan kepada 100%. Tingkah laku ini boleh menyebabkan kandungan yang melimpah menjadi bertopeng.

Penyelesaian

Untuk membetulkan masalah ini dan memastikan responsif IFrame dalam iOS Safari, terdapat dua pilihan:

Pilihan 1: Ubah suai Kandungan IFrame

Jika anda mengawal kandungan dalam IFrame, ubah suai CSS div dengan limpahan: tatal ke yang berikut:

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

Teknik ini mengatasi kelakuan lalai iOS Safari dan memaksa lebar div kepada 100%, membenarkan limpahan untuk disembunyikan.

Pilihan 2: Ubah suai IFrame Itu sendiri

Jika mengubah suai kandungan IFrame tidak dapat dilaksanakan, anda boleh menggunakan CSS yang sama pada IFrame itu sendiri:

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

Walau bagaimanapun, pilihan ini memerlukan melumpuhkan bar skrol pada IFrame menggunakan scrolling="no":

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

Kesimpulan

Dengan mengikuti salah satu daripada penyelesaian yang disediakan, anda boleh memastikan bahawa IFrames kekal responsif dalam iOS Safari sambil menampung penatalan mendatar kawasan dalam kandungannya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat IFrames Responsif Berfungsi dengan Baik dalam Safari iOS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!