Bagaimana untuk Menghalang Elemen Tetap daripada Saiz Semula pada Zum Skrin Sentuh?

Menyelesaikan Isu Saiz Semula Elemen Tetap Semasa Zum Skrin Sentuh

Dalam halaman HTML, elemen tetap dengan sifat ketinggian dan kedudukan yang ditentukan sering mengalami perubahan saiz apabila pengguna zum masuk menggunakan peranti skrin sentuh. Tingkah laku ini boleh menghalang kandungan dan mengurangkan pengalaman pengguna yang dimaksudkan.

Penyelesaian:

Untuk mengelakkan elemen tertentu daripada mengubah saiz semasa mengezum, kami boleh menggunakan gabungan JavaScript dan Teknik CSS3:

1. Kesan Gerak Isyarat Zum: Tambahkan pendengar acara untuk memantau acara 'tatal' tetingkap, yang tercetus apabila pengguna menatal atau mengezum halaman.
2. Kira Faktor Zum: Dalam pendengar acara, tentukan faktor zum menggunakan nisbah lebar semasa port pandangan kepada lebar awal dokumen. Ini memberikan tahap zum relatif.
3. Gunakan Transformasi CSS: Gunakan faktor zum yang dikira pada elemen yang dikehendaki menggunakan sifat 'transformasi' CSS3. Tindakan ini menskalakan elemen kembali kepada saiz asalnya dalam port pandangan yang dizum, dengan berkesan menghalang saiz semula.
4. Letakkan semula Elemen: Apabila tahap zum berubah, kedudukan elemen mungkin terjejas. Kira semula kedudukannya menggunakan mengimbangi halaman tetingkap dan laraskan sifat CSS 'kiri' dan 'bawah' dengan sewajarnya.
5. Pertimbangkan Transform-Origin: Tentukan titik penambat dari mana elemen harus berskala, menggunakan sifat 'transform-origin' CSS. Ini menjejaskan titik rujukan untuk penskalaan.

Dengan melaksanakan langkah-langkah ini, anda boleh menghalang elemen tetap daripada mengubah saiz pada peranti skrin sentuh sambil mengekalkan kedudukan yang dimaksudkan dan mempersembahkan pengalaman pengguna yang optimum.

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