Bagaimana Mengekalkan Elemen Tetap daripada Mengubah Saiz Semasa Zum Skrin Sentuh?

Mengekalkan Saiz Elemen Tetap Semasa Mengezum Skrin Sentuh

Peranti mudah alih yang dilengkapi dengan skrin sentuh menimbulkan cabaran unik untuk elemen tetap pada halaman web. Apabila pengguna mencubit skrin untuk mengezum masuk, elemen tetap cenderung untuk mengubah saiz bersama-sama dengan kandungan yang lain, yang berpotensi mengaburkan elemen asas.

Untuk mengelakkan tingkah laku ini, kami boleh menggunakan teknik yang mengira faktor zum semasa dan menggunakan transformasi CSS3 yang sesuai pada elemen tetap, memastikan ia kekal saiz yang sama pada setiap masa.

<code class="javascript">window.addEventListener('scroll', function(e) {
    var zoom = window.innerWidth / document.documentElement.clientWidth;
    el.style["transform"] = "scale(" + zoom + ")";
});</code>

Logik ini mengira faktor zum dan menggunakannya sebagai perubahan skala. Walau bagaimanapun, memandangkan kedudukan elemen tetap mungkin menjadi tidak tepat, kami melaraskannya menggunakan kedudukan mutlak:

<code class="javascript">el.style.left = window.pageXOffset + 'px';
el.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px';</code>

Letakkan elemen tetap dalam elemen induk ketinggian kandungan 100% dan melaraskan kedudukannya berdasarkan dimensi viewport memastikan ia kekal kelihatan di lokasi yang dikehendaki, tanpa mengira tahap zum.

Beri perhatian kepada sifat asal-ubah jika anda perlu mengawal titik penambat skala untuk elemen tetap. Dengan menggunakan teknik ini, anda boleh mencipta elemen yang mengekalkan saiznya semasa acara zum skrin sentuh, meningkatkan pengalaman pengguna pada peranti mudah alih.

Atas ialah kandungan terperinci Bagaimana Mengekalkan Elemen Tetap daripada Mengubah Saiz Semasa Zum Skrin Sentuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!