Mengapa Imej Latar Belakang Skrin Penuh Saya Gegar pada Chrome Mudah Alih dan Bagaimana Saya Boleh Membetulkannya?

Getaran Imej Latar Belakang pada Chrome Mudah Alih

Dalam membangunkan tapak web responsif dengan imej latar belakang skrin penuh yang beralih merentas mudah alih, tablet dan desktop, telah diperhatikan bahawa latar belakang melonjak sedikit apabila bar alamat bersembunyi pada penyemak imbas iOS/Android atau Chrome pada Android.

Isunya berpunca daripada sifat css imej latar belakang, yang termasuk tetapan "tetap" dan "kulit". Apabila bar alamat hilang, ketinggian div latar belakang berubah kerana ia ditetapkan kepada ketinggian 100%. Ini seterusnya menjejaskan imej latar belakang, menyebabkan ia melaraskan saiz dan kedudukannya agar sesuai dengan saiz bekas baharu.

Untuk menyelesaikannya, dua penyelesaian dicadangkan:

Penyelesaian 1: Gunakan CSS vh Unit (Tidak Disyorkan)

Menetapkan ketinggian div latar belakang kepada 100vh mengekalkan tingkah laku yang diingini; walau bagaimanapun, terdapat pepijat vh yang diketahui dalam iOS yang menyebabkan ketidakkonsistenan dalam ukuran unit port pandang. Percubaan untuk mengurangkan isu ini dengan ketinggian maksimum atau penyelesaian lain tidak berjaya.

Penyelesaian 2: Gunakan Javascript untuk Tetapkan Ketinggian Berdasarkan Saiz Port Pandangan

Javascript memberikan lebih banyak pendekatan yang boleh dipercayai, kerana ia tidak terjejas oleh saiz semula bar URL. Dengan menentukan saiz port pandangan dan menetapkan ketinggian div latar belakang dengan sewajarnya, imej kekal statik tanpa mengira keterlihatan bar alamat.

Berikut ialah skrip Javascript:

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

Pelarasan Tambahan:

Sementara skrip Javascript menangani isu saiz semula latar belakang, jurang yang ketara mungkin muncul apabila menatal ke bawah. Ini boleh diselesaikan dengan menambahkan offset kecil pada pengiraan ketinggian latar belakang, dengan berkesan menyembunyikan potensi jurang.

function resizeBackground() {
    bg.height( $(window).height() + 60); // Add 60px to compensate for gap
}

Atas ialah kandungan terperinci Mengapa Imej Latar Belakang Skrin Penuh Saya Gegar pada Chrome Mudah Alih dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!