Mengapa Kedudukan: Dibetulkan Tidak Berfungsi dalam Penyemak Imbas Mudah Alih dan Bagaimana Saya Boleh Membetulkannya?

Kedudukan Tetap Tidak Berfungsi dalam Penyemak Imbas Mudah Alih

Latar Belakang

Pembangun web sering menghadapi cabaran apabila cuba meletakkan elemen tetap dalam penyemak imbas mudah alih. Kedudukan sifat CSS: tetap membenarkan elemen mengekalkan kedudukannya walaupun semasa kandungan di sekeliling menatal. Walau bagaimanapun, ciri ini secara historis bermasalah dalam versi iOS dan Android yang lebih lama.

Isu

Dalam penyemak imbas mudah alih seperti versi iOS sebelum 5 dan versi Android lebih awal daripada 4, kedudukan: tetap kerosakan harta benda. Elemen yang diberikan sifat ini masih akan menatal bersama dengan kandungan halaman, menafikan kesan kedudukan "tetap" yang dimaksudkan.

Penyelesaian

Untuk menangani isu ini, pembangun berpengalaman telah mencipta penyelesaian pragmatik yang berfungsi secara konsisten dalam berbilang penyemak imbas mudah alih:

Menggunakan -webkit-backface-visibility: hidden;

Kunci untuk menyelesaikan masalah ini terletak pada sifat CSS -webkit-backface-visibility. Dengan menetapkan ini kepada tersembunyi, kami pada asasnya memaksa penyemak imbas untuk mengekalkan muka hadapan elemen. Ini menghalangnya daripada dikaburkan atau dipengaruhi oleh kandungan asas, memastikan ia kekal "ditetapkan" pada skrin.

Contoh

Untuk menggambarkan penyelesaian ini dalam tindakan, pertimbangkan coretan kod berikut:

<code class="css">.fixed {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 320px;
  height: 50px;
  background: red;
  -webkit-backface-visibility: hidden; /* Most Important */
}</code>

<code class="html"><div class="fixed">
  Hi I'm Position Fixed
</div></code>

Apabila digunakan pada halaman web, kod ini akan mencipta segi empat tepat merah dengan kedudukan tetap. Ia akan kekal di lokasi yang sama pada skrin, walaupun apabila halaman itu ditatal.

Nota: Perlu dinyatakan bahawa penyelesaian ini menyelesaikan masalah utama dalam peranti iOS dan Android. Untuk penyemak imbas lain, pendekatan alternatif mungkin diperlukan.

Atas ialah kandungan terperinci Mengapa Kedudukan: Dibetulkan Tidak Berfungsi dalam Penyemak Imbas Mudah Alih dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!