Mengapa Saiz latar belakang: penutup Gagal pada Safari Mudah Alih dan Bagaimana untuk Membetulkannya?

Mengatasi Had Safari Mudah Alih dengan saiz latar belakang CSS: penutup

Dalam bidang pembangunan web, selalunya diingini untuk mempunyai imej latar belakang yang regangan dengan lancar untuk mengisi keseluruhan bekas. Walaupun CSS menawarkan saiz latar belakang harta benda: penutup untuk tujuan ini, ia menimbulkan cabaran yang tidak dijangka apabila melibatkan peranti iOS.

Masalahnya

Apabila menggunakan latar belakang- saiz: tutup ke div pada peranti iOS, imej latar belakang gagal meliputi keseluruhan kawasan. Sebaliknya, ia mengekalkan nisbah bidang asalnya dan mengecilkan skala, mengakibatkan salah jajaran antara imej dan bekas.

Penyelesaian

Isunya bukan pada saiz latar belakang : penutup tetapi dengan latar belakang-lampiran: harta tetap. Untuk menyelesaikan masalah ini, pertanyaan media boleh digunakan untuk mengatasi kelakuan lampiran untuk peranti iPhone, membenarkan imej latar belakang menatal dengan kandungan.

.section {
  ...
  background-attachment: fixed;
  background-position: center center;
}

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

Dalam contoh ini, @iphone-screen ialah pra- pembolehubah yang ditakrifkan yang mewakili lebar skrin maksimum untuk peranti iPhone. Dengan menetapkan lampiran latar belakang untuk menatal untuk peranti ini, imej latar belakang kini akan menutup sepenuhnya bekas, melaraskan kepada lebar port pandangan dan saiz kandungan yang berbeza-beza.

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