Bagaimanakah Anda Boleh Mengekalkan Saiz Elemen Tetap pada Zum Skrin Sentuh?

Kekalkan Saiz Elemen pada Zum Skrin Sentuh

Apabila elemen tetap dipaparkan pada peranti skrin sentuh, zum masuk atau keluar boleh menyebabkan ia mengubah saiz, mewujudkan tingkah laku yang tidak diingini. Ini boleh mengganggu navigasi tapak atau menyebabkan kandungan bertindih.

Satu pendekatan untuk menghalang gelagat ini ialah dengan melaraskan skala elemen secara dinamik menggunakan transformasi CSS3. Dengan memantau acara tatal, kami boleh mengira faktor zum dan menerapkannya pada elemen, memastikan saiznya konsisten.

Sebagai contoh, coretan kod berikut mengira faktor zum dan menggunakannya sebagai transformasi skala:

el.style["transform"] = "scale(" + window.innerWidth/document.documentElement.clientWidth + ")";

Walau bagaimanapun, pelarasan ini sahaja mungkin tidak mencukupi. Elemen tetap cenderung berkelakuan berbeza pada Safari mudah alih dengan halaman yang dizum. Untuk mengimbangi, kami boleh meletakkan elemen berskala sepenuhnya dalam elemen induk ketinggian 100% dan melaraskan kedudukannya secara dinamik:

overlay.style.left = window.pageXOffset + 'px';
overlay.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px';

Dengan menggunakan teknik ini, kami boleh menghalang elemen tetap daripada mengubah saiz apabila mengezum pada peranti skrin sentuh dengan berkesan , memastikan ia mengekalkan saiz dan keterlihatan yang dimaksudkan.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Mengekalkan Saiz Elemen Tetap pada Zum Skrin Sentuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!