Bagaimana untuk melumpuhkan zum halaman menggunakan JavaScript

Dengan populariti peranti mudah alih, penyesuaian halaman web menjadi semakin penting. Satu isu sedemikian ialah penskalaan halaman, yang boleh menyebabkan kesulitan dan kekeliruan kepada pengguna. Walaupun kebanyakan penyemak imbas menyediakan fungsi zum, dalam sesetengah senario adalah perlu untuk melarang pengguna daripada mengezum pada halaman. Jadi, bagaimana untuk melumpuhkan zum halaman menggunakan JavaScript?

Kaedah pertama ialah menggunakan tag meta untuk mengawal penskalaan. Tambahkan kod berikut pada teg kepala untuk melumpuhkan zum halaman.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Dalam kod di atas, viewport bermaksud viewport, width=device-width bermaksud lebar peranti ialah lebar viewport, initial-scale=1.0 bermaksud nisbah zum awal halaman ialah 1, skala maksimum =1.0 bermakna nisbah zum maksimum halaman juga 1, boleh skala pengguna=tidak bermakna pengguna tidak boleh mengezum halaman.

Kelebihan kaedah ini ialah ia mudah dan mudah digunakan, mempunyai kod yang kurang dan mempunyai keserasian penyemak imbas yang baik. Tetapi kaedah ini mempunyai kelemahan: pengguna masih boleh mengezum masuk dan keluar dari halaman melalui gerak isyarat cubitan dua jari Walaupun julat nisbah terhad kepada 1~1, ini mungkin masih menjejaskan pengalaman pengguna.

Kaedah kedua ialah menggunakan JavaScript untuk memantau acara zum dan segera memulihkan nisbah zum halaman kepada 1 sebaik sahaja pengguna melakukan operasi zum. Di bawah ialah contoh kod yang dilaksanakan menggunakan jQuery.

$(document).ready(function() {
   $(document).on('touchmove', function(e) {
     if (e.originalEvent.scale !== 1) {
        e.preventDefault();
     }
   });
});

Dalam kod di atas, kami menggunakan jQuery untuk mengikat acara gerak sentuh Apabila pengguna melakukan gerak isyarat zum picit-untuk-zum, ia dinilai sama ada nisbah zum adalah sama dengan 1. Jika ia. tidak sama dengan 1, kaedah preventDefault( ) melumpuhkan tingkah laku lalai acara. Ini berkesan menghalang pengguna daripada mengezum halaman.

Perlu diambil perhatian bahawa kaedah ini hanya boleh melumpuhkan zum isyarat Jika pengguna menggunakan kekunci pintasan atau pilihan zum dalam bar menu penyemak imbas untuk mengezum masuk dan keluar dari halaman, kaedah ini akan menjadi tidak sah.

Kaedah ketiga ialah menggunakan kedua-dua tag meta dan JavaScript untuk memantau acara zum. Kaedah ini menggabungkan kelebihan dua kaedah pertama dan lebih kompleks dalam pelaksanaan, tetapi ia juga boleh mencapai hasil yang lebih baik. Berikut ialah contoh kod:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

var prevScale = 1;
$(document).ready(function() {
    $(document).on('touchmove', function(e) {
        if (e.originalEvent.scale !== prevScale) {
            $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
        }
        prevScale = e.originalEvent.scale;
    });
});

Terangkan fungsi kod di atas:

Dalam langkah pertama, kami menggunakan tag meta untuk menghalang pengguna daripada mengezum halaman.

Langkah kedua ialah menggunakan JavaScript untuk mendengar acara touchmove.

Langkah ketiga ialah menyemak sama ada nilai e.originalEvent.scale adalah sama dengan prevScale Jika tidak, tetapkan semula kandungan tag meta dan lumpuhkan penskalaan halaman.

Perlu diambil perhatian bahawa kaedah ini juga mempunyai kelemahan Pengezum tidak boleh dilumpuhkan sepenuhnya, dan beberapa situasi yang tidak dijangka mungkin masih berlaku.

Ringkasnya, dalam sesetengah senario, adalah keperluan biasa untuk melarang pengguna daripada mengezum masuk pada halaman web. Kami boleh memilih kaedah yang sesuai untuk mencapai tujuan ini dan meningkatkan pengalaman halaman web pada peranti mudah alih.

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan zum halaman menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!