Mengapa Imej Latar Belakang Skrin Penuh Saya Melompat pada Chrome Mudah Alih Apabila Bar Alamat Bersembunyi?

Offset Imej Latar Belakang pada Bar Alamat Sembunyikan dalam iOS/Android/Mobile Chrome

Isu

Apabila membangunkan tapak web responsif menggunakan CSS, termasuk penuh -imej latar belakang skrin yang berputar dan pudar antara dua div, tingkah laku yang tidak dijangka berlaku: imej latar belakang melonjak sedikit apabila menatal ke bawah pada iOS Safari, Penyemak Imbas Android atau Android Chrome. Ini disebabkan oleh bar alamat bersembunyi dan seterusnya melaraskan saiz div latar belakang, yang ditetapkan dan ditetapkan kepada ketinggian 100%.

Penyelesaian

Untuk menyelesaikan isu ini, dua kemungkinan penyelesaian wujud. :

1. Tetapkan ketinggian #bg1 dan #bg2 kepada 100vh: Penyelesaian ini secara teorinya elegan, menggunakan ketinggian viewport untuk menetapkan ketinggian yang sesuai. Walau bagaimanapun, iOS mempunyai pepijat vh yang menjejaskan penyelesaian ini.
2. Gunakan JavaScript untuk menetapkan ketinggian statik: Saiz port pandangan, apabila ditentukan oleh JavaScript, tidak terjejas oleh bar alamat. Oleh itu, JavaScript boleh menetapkan ketinggian statik untuk div latar belakang berdasarkan saiz viewport. Ini bukan penyelesaian yang ideal kerana sifat CSSnya yang tidak tulen dan sedikit lonjakan imej pada pemuatan halaman, tetapi ia berdaya maju memandangkan pepijat vh iOS.

Menggunakan kod JavaScript berikut akan melaraskan latar belakang ketinggian secara dinamik:

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

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

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

Pertimbangan Tambahan

Sedangkan penyelesaian di atas berkesan menghalang saiz semula latar belakang, ia boleh menyebabkan jurang yang ketara apabila pengguna menatal ke bawah. Jurang ini terhasil daripada pemadanan ketinggian latar belakang dengan skrin tolak ketinggian bar URL. Dengan menambahkan 60px pada ketinggian, isu ini boleh diselesaikan, tetapi ini bermakna 60px bahagian bawah imej latar belakang tidak akan kelihatan apabila bar URL hadir:

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

Perlu diperhatikan bahawa saiz semula ini Bar URL dalam iOS dan Android telah menimbulkan kebimbangan kerana kesannya terhadap fungsi tapak web. Walaupun tujuan mereka difahami, tingkah laku mereka boleh menyebabkan cabaran yang tidak dijangka dalam reka bentuk berasaskan CSS.

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