Bagaimana untuk Menjadikan IFrames Responsif dalam iOS Safari, Walaupun dengan Bar Skrol Dalaman?

Menjadikan IFrames Responsif dalam iOS Safari

Penerangan Masalah

Menyepadukan kandungan ke dalam tapak web menggunakan IFrames memerlukan IFrames responsif. Penyelesaian CSS asas seperti menetapkan lebar iframe kepada 100% mungkin tidak mencukupi. Walau bagaimanapun, mencapai responsif menjadi amat mencabar apabila kandungan iframe menampilkan bar skrol dalaman.

IFrames Responsif dengan Kawasan Tatal

Untuk menjadikan IFrames responsif dalam Safari iOS, walaupun kandungan termasuk kawasan tatal, anda mempunyai dua pilihan:

Pilihan 1: Ubah suai Kandungan

1. Tetapkan lebar kawasan boleh tatal (cth., div#ScrolledArea) dalam kandungan iframe kepada:

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

2. Ini memaksa iOS Safari untuk ubah saiz iframe dengan betul, membolehkan kawasan skrol berfungsi.

Pilihan 2: Ubah suai iframe

1. Jika anda tidak mempunyai akses kepada kandungan iframe, anda boleh menggunakan CSS berikut pada iframe itu sendiri:

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

2. Walau bagaimanapun, anda mesti melumpuhkan tatal dalam iframe dengan menambahkan tatal="no" padanya HTML:

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

Nota

Dalam pilihan 2, melumpuhkan penatalan dalam iframe menghalang anda daripada menggunakan kawasan tatal dalam kandungan iframe. Walau bagaimanapun, jika anda mengubah suai kandungan iframe (pilihan 1), anda boleh mengekalkan fungsi penatalan.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan IFrames Responsif dalam iOS Safari, Walaupun dengan Bar Skrol Dalaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!