Mengapa Imej Latar Belakang Tapak Web Responsif Saya Melompat Apabila Bar Alamat Bersembunyi pada Mudah Alih?

Imej Latar Belakang Melompat Apabila Bar Alamat Tersembunyi pada iOS/Android/Chrome Mudah Alih

Tapak web responsif menggunakan Twitter Bootstrap sering menghadapi isu di mana latar belakang imej berubah atau melonjak apabila menatal pada iOS Safari, Penyemak Imbas Android atau Chrome untuk Android. Ini berlaku disebabkan bar alamat mengubah saiz dan mengubah saiz div bekas imej latar belakang.

Punca dan Penyelesaian

Penyebabnya terletak pada penggunaan ketinggian tetap ( 100%) dan saiz latar belakang: penutup untuk div latar belakang. Apabila bar alamat mengecil, ia menukar ketinggian elemen yang mengandungi, menyebabkan imej latar belakang diubah saiz dan kedudukan semula.

Satu penyelesaian yang berpotensi adalah untuk menetapkan ketinggian div latar belakang kepada 100vh (ketinggian viewport). Walau bagaimanapun, iOS mempunyai pepijat vh yang menghalang pendekatan ini daripada berfungsi secara konsisten.

Sebagai alternatif, penyelesaian yang lebih dipercayai melibatkan penggunaan JavaScript untuk menetapkan ketinggian statik pada div latar belakang berdasarkan saiz port pandang. Pendekatan ini mengelakkan tingkah laku buggy dan menghalang imej melompat semasa menatal. Kod berikut menunjukkan penyelesaian ini:

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

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

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

Walau bagaimanapun, kaedah ini boleh memperkenalkan jurang apabila menatal ke bawah. Untuk mengurangkan ini, adalah disyorkan untuk menambah penimbal 60px pada ketinggian, seperti yang dicadangkan oleh swiss:

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

Walaupun penyelesaian ini mengorbankan keterlihatan beberapa kandungan latar belakang apabila bar alamat hadir, ia menghalang pengguna daripada menghadapi sebarang jurang atau ketidakkonsistenan semasa menatal.

Atas ialah kandungan terperinci Mengapa Imej Latar Belakang Tapak Web Responsif Saya Melompat Apabila Bar Alamat Bersembunyi pada Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!