Bagaimana untuk Menghalang Saiz Semula Elemen Tetap Semasa Mengezum Skrin Sentuh?

Cara Menyelesaikan Isu Saiz Semula Elemen Tetap Apabila Mengezum pada Peranti Skrin Sentuh

Dalam pembangunan web, adalah penting untuk mengekalkan konsistensi elemen tanpa mengira interaksi pengguna. Walau bagaimanapun, apabila menggunakan elemen tetap pada skrin sentuh, zum boleh menyebabkan isu saiz semula yang tidak dijangka.

Pertimbangkan coretan kod ini:

<code class="html"><div id="fixed">
  <p>Some content</p>
</div></code>

<code class="css">#fixed {
  height: 150px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}</code>

Pada skrin sentuh, apabila pengguna mencubit untuk mengezum masuk , elemen tetap, bersama-sama dengan kandungan yang lain, meningkat. Walau bagaimanapun, dengan zum yang berlebihan, elemen boleh menjadi bersaiz besar dan bertindih dengan kandungan lain. Untuk menangani isu ini, kami perlu menghalang elemen tetap kami daripada mengubah saiz semasa acara zum.

Penyelesaian terletak pada pengiraan semula skala dan kedudukan elemen berdasarkan tahap zum pengguna. Kita boleh mencapainya dengan terus mengemas kini perubahan dan kedudukan CSS elemen semasa acara tatal:

<code class="javascript">window.addEventListener('scroll', function(e) {
  // Calculate the zoom factor.
  var zoom = window.innerWidth / document.documentElement.clientWidth;

  // Apply the zoom factor as a CSS3 transform.
  el.style["transform"] = "scale(" + zoom + ")";
});</code>

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

Pendekatan ini secara berkesan menskalakan elemen kembali kepada saiz asalnya dan melaraskan kedudukannya dengan sewajarnya, tanpa mengira zum tahap.

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