Bagaimana untuk Menjadikan iFrames Responsif dalam iOS Safari?

iFrames responsif dalam iOS Safari

Apabila menyepadukan kandungan menggunakan iFrames dalam iOS Safari, mencapai responsif boleh menjadi mencabar, terutamanya apabila kandungan iFrame termasuk kawasan tatal mendatar.

iOS Gelagat Lalai

Jika kandungan iFrame responsif sepenuhnya dan boleh melaraskan saiznya tanpa menggunakan bar skrol dalaman, iOS Safari akan mengubah saiz iFrame dengan sewajarnya.

Isu Limpahan

Walau bagaimanapun, menambah limpahan: tatal ke Kandungan iFrame boleh mengganggu tingkah laku ini. Apabila ini berlaku, iOS Safari akan mengubah saiz iFrame secara automatik untuk menjadikan kandungan yang melimpah kelihatan.

Penyelesaian

• Mengubah suai Kandungan iFrame : Tetapkan lebar div yang melimpah (cth., #ScrolledArea) ke:

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

  Ini memaksa iOS Safari untuk menghormati nilai lebar min, memastikan lebar div sepadan dengan lebar iFrame.

• Mengubah suai iFrame: Jika anda tidak mempunyai akses kepada Kandungan iFrame, gunakan CSS yang sama pada iFrame itu sendiri:

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

  Untuk ini berfungsi, anda mesti melumpuhkan bar skrol menggunakan skrol="no" pada iFrame.

Dengan melaksanakan salah satu daripada penyelesaian ini, anda boleh mencapai iFrames responsif dalam iOS Safari, walaupun kandungannya melibatkan mendatar menatal.

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