Bagaimana untuk melumpuhkan zum dalam HTML5

Dengan populariti peranti mudah alih dan kemunculan HTML5, semakin banyak tapak web mula dibangunkan untuk peranti mudah alih. Pada peranti mudah alih, disebabkan oleh perbezaan besar dalam saiz dan peleraian skrin, halaman perlu diskalakan untuk menyesuaikan diri dengan peranti yang berbeza. Walau bagaimanapun, kadangkala kami ingin melarang penskalaan halaman Sebagai contoh, jika kami menyesuaikan halaman untuk menyesuaikan diri dengan peranti yang berbeza, kami berharap pengguna tidak boleh menukar reka letak halaman. Artikel ini akan menerangkan cara untuk melumpuhkan zum dalam HTML5.

1. Tambahkan atribut viewport dalam meta tag

Kami boleh menambah atribut viewport dalam meta tag untuk mengawal kelakuan zum halaman.

Teg meta ini mengandungi atribut berikut:

boleh skala pengguna: sama ada pengguna boleh mengezum halaman. Jika nilainya ialah "tidak", pengguna dilarang mengezum halaman.

lebar: Tetapkan lebar halaman kepada lebar peranti.

skala awal: Tetapkan nisbah zum awal halaman kepada 1.0.

skala maksimum: Tetapkan skala maksimum yang halaman boleh zum kepada 1.0.

skala minimum: Tetapkan skala minimum yang halaman boleh zum kepada 1.0.

Dalam teg meta ini, kami menetapkan atribut boleh skala pengguna kepada "tidak", yang melumpuhkan pengguna daripada menskala halaman. Lebar, skala awal, skala maksimum dan skala minimum memastikan kesan paparan halaman pada peranti berbeza adalah konsisten.

2. Gunakan CSS untuk melumpuhkan zum

Selain menetapkan atribut port pandang dalam teg meta, kami juga boleh menggunakan CSS untuk melumpuhkan zum. Kami boleh menggunakan pertanyaan media CSS3 untuk menggunakan helaian gaya yang berbeza pada peranti yang berbeza.

@media (lebar maksimum: 600px) {

html {
    -webkit-text-size-adjust: none;
}

}

Di sini, kami menggunakan pertanyaan media untuk menentukan sama ada lebar halaman kurang daripada 600px, jika kurang, Kami menggunakan sifat CSS -webkit-text-size-adjust untuk melumpuhkan penskalaan. Nilai atribut ini boleh menjadi tiada, auto, 100%, dsb. untuk mengawal kelakuan zum halaman.

3. Gunakan JavaScript untuk melumpuhkan zum

Kami juga boleh menggunakan JavaScript untuk melumpuhkan zum. Dalam JavaScript, kami boleh melumpuhkan zum melalui acara onmousewheel dokumen:

document.onmousewheel = function(e) {

e.preventDefault();

}

Kod ini akan Menyekat lalai tingkah laku peristiwa roda tetikus, dengan itu melumpuhkan zum halaman.

4. Nota

Tidak kira kaedah yang anda gunakan untuk melumpuhkan zum halaman, anda perlu memberi perhatian kepada perkara berikut:

1. Jangan lumpuhkan zum pada semua peranti. Jika anda melakukan ini, pengguna mungkin tidak dapat membaca kandungan pada halaman, terutamanya pada peranti mudah alih.
2. Jangan lumpuhkan penskalaan apabila halaman tidak cukup serba boleh untuk menyesuaikan diri dengan peranti yang berbeza. Jika tidak, pengguna tidak akan dapat menyemak imbas halaman dengan betul.
3. Untuk reka letak halaman yang berbeza, anda mungkin perlu menggunakan kaedah yang berbeza untuk melumpuhkan zum.

Ringkasnya, terdapat tiga cara untuk melumpuhkan zum dalam HTML5: menambahkan atribut port pandangan dalam teg meta, menggunakan CSS untuk melumpuhkan zum dan menggunakan JavaScript untuk melumpuhkan zum. Walau bagaimanapun, mana-mana kaedah yang digunakan untuk melumpuhkan penskalaan, terdapat had dan kaveat yang perlu diambil perhatian apabila menggunakannya.

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