Bagaimana untuk Membetulkan Isu Saiz Semula Iframe pada iOS: Penyelesaian CSS?

Mengatasi Isu Saiz Semula iframe pada iOS Menggunakan CSS

Jika anda menghadapi masalah iframe melimpahi saiz bingkai yang ditetapkan pada peranti iOS, walaupun berfungsi dengan betul pada penyemak imbas lain, panduan ini akan memberikan penyelesaian.

Ringkasnya, iOS Safari tidak mematuhi kekangan saiz iframe konvensional yang ditetapkan dengan CSS, menyebabkan saiz iframe diubah suai dengan kandungannya. Untuk menyelesaikan masalah ini, kami menggunakan div pembalut yang mengawal limpahan:

<code class="css"><div class="frame_wrapper">
    <iframe class="my_frame">
        // Content
    </iframe>
</div></code>

Sifat CSS berikut digunakan pada div pembalut:

<code class="css">.frame_wrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* Additional CSS styles... */
}</code>

Sifat limpahan mengawal pengendalian limpahan kandungan, menetapkannya kepada auto membolehkan bar skrol muncul seperti yang diperlukan. Sifat -webkit-overflow-scrolling adalah khusus untuk peranti iOS dan mendayakan pengalaman menatal yang anggun.

Dengan merangkum iframe dalam div pembalut ini, kami mengawal kelakuan limpahan dan mengarahkan iOS Safari untuk mematuhi dimensi iframe yang diingini . Anda boleh menyemak contoh yang dikemas kini di sini: http://jsfiddle.net/R3PKB/7/

Penyelesaian ini menangani pepijat lama dalam pengendalian iframe iOS Safari, seperti yang disahkan dalam perbincangan Stack Overflow sebelumnya.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Isu Saiz Semula Iframe pada iOS: Penyelesaian CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!