Mengapa `saiz latar belakang: penutup` Gagal pada Safari Mudah Alih dan Cara Membaikinya?

Mengatasi Had saiz latar belakang: penutup dalam Safari Mudah Alih

Peranti iOS memberikan cabaran unik apabila ia datang untuk melaksanakan imej latar belakang yang meliputi keseluruhan elemen menggunakan saiz latar belakang: penutup. Walaupun tingkah laku yang dijangkakan, sifat ini sering menghasilkan hasil yang tidak diingini pada platform ini.

Untuk menangani isu ini, penyelesaian yang bijak telah muncul. Dengan melaraskan sifat lampiran latar belakang untuk menatal dalam pertanyaan media yang khusus menyasarkan iPhone, tingkah laku bermasalah boleh dibetulkan.

Berikut ialah versi dikemas kini bagi kod yang disediakan:

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1,
#section2,
#section3 {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

  @media (max-width: @iphone-screen) {
    background-attachment: scroll;
  }
}

Dengan memasukkan pertanyaan media ini, sifat lampiran latar belakang ditetapkan untuk menatal hanya untuk peranti dengan lebar kurang daripada atau sama dengan pembolehubah skrin @iphone yang dipratakrifkan. Ini memastikan bahawa imej latar belakang berkelakuan seperti yang diharapkan pada iPhone sambil mengekalkan kedudukan tetapnya pada skrin yang lebih besar.

Penyelesaian ini menyediakan cara yang mudah dan elegan untuk menangani isu biasa ini, membolehkan anda mencipta imej latar belakang lebar penuh yang lancar pada semua peranti, termasuk iOS.

Atas ialah kandungan terperinci Mengapa `saiz latar belakang: penutup` Gagal pada Safari Mudah Alih dan Cara Membaikinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!