javascript menetapkan peratusan zum pelayar

Dengan perkembangan teknologi komputer yang berterusan, penghasilan halaman web telah menjadi salah satu bidang penting. Dalam proses penghasilan halaman web, JavaScript adalah bahasa pengaturcaraan yang sangat penting. Ia boleh menjadikan halaman web dinamik dan mencapai pelbagai kesan. Antaranya, penskalaan halaman adalah masalah yang sering dihadapi dalam banyak reka bentuk web. Dalam artikel ini, kami akan membincangkan cara menetapkan peratusan zum penyemak imbas menggunakan JavaScript.

1. Apakah itu zum penyemak imbas

Zum penyemak imbas merujuk kepada melaraskan saiz halaman web melalui fungsi zum penyemak imbas. Ia boleh mengecilkan atau membesarkan paparan halaman untuk menyesuaikan dengan saiz skrin atau keperluan pengguna yang berbeza.

2. Mengapa anda perlu menetapkan zum penyemak imbas

Apabila mereka bentuk halaman web, kadangkala kami mahu halaman web dipaparkan dalam julat saiz tertentu tetapkan zum pelayar. Senario aplikasi khusus termasuk:

1. Untuk mempersembahkan kesan visual terbaik semasa mereka bentuk halaman Web, halaman perlu ditetapkan kepada saiz tertentu.
2. Kandungan halaman web adalah besar Untuk kemudahan pengguna membaca, sesetengah kandungan mungkin dikurangkan atau diperbesarkan.
3. Dalam penghasilan halaman web, kadangkala perlu mengekalkan halaman dalam saiz tetap dan bukannya berubah bentuk apabila saiz skrin berubah. Anda juga perlu menetapkan zum penyemak imbas pada masa ini.

3. Cara menetapkan zum penyemak imbas melalui javascript

Dalam javascript, kita boleh menetapkan peratusan zum penyemak imbas melalui objek dokumen. Kod pelaksanaan adalah seperti berikut:

window.onload=function(){
    document.body.style.zoom="80%";
}

Antaranya, 80% ialah peratusan skala yang kami tetapkan. Di sini kami menetapkan atribut zum elemen badan kepada 80%, mencapai kesan mengecilkan halaman sebanyak 20%.

Selain itu, terdapat aplikasi lain dalam amalan.

1. Tetapkan secara langsung nisbah penskalaan halaman penyemak imbas

var scale = window.devicePixelRatio;
document.body.style.zoom = 1 / scale;

Dalam kod di atas, kami memperoleh nisbah piksel peranti semasa melalui objek tetingkap, dan kemudian tetapkan nisbah penskalaan halaman ialah 1/skala, yang merupakan timbal balik nisbah piksel peranti, untuk mencapai kesan penyesuaian.

2. Tetapkan nisbah zum halaman mengikut saiz tetingkap

function resizeWindow(){
    var screenWidth = window.innerWidth;
    var Zoom = screenWidth / 1920; 
    document.body.style.zoom = Zoom.toFixed(2); 
}

Dalam kod di atas, kami memperoleh lebar tetingkap semasa melalui objek tetingkap, dan kemudian mengira nisbah zum halaman. Di sini kita menganggap bahawa lebar tetingkap ialah 1920px, gunakannya sebagai lebar standard, kira nisbah lebar tetingkap semasa kepada lebar standard, dan kemudian tetapkan nisbah zum halaman kepada nilai nisbah ini.

4. Cara membatalkan zum penyemak imbas

Apabila mereka bentuk halaman web, kadangkala kita mungkin perlu membatalkan zum penyemak imbas untuk memastikan halaman tidak berubah bentuk. Kaedah pelaksanaan adalah seperti berikut:

document.body.style.zoom = 1;

Tetapkan atribut zum kepada 1 untuk membatalkan zum penyemak imbas. Pada masa ini, halaman akan mengekalkan saiz dan perkadaran asalnya.

5. Ringkasan

Menetapkan zum penyemak imbas melalui JavaScript membolehkan kami mengawal kesan paparan tapak web dengan lebih baik dan meningkatkan pengalaman pengguna. Dalam penggunaan sebenar, adalah perlu untuk memilih nisbah penskalaan yang sesuai atau penyelesaian penyesuaian mengikut situasi sebenar untuk mencapai kesan paparan halaman yang terbaik. Pada masa yang sama, adalah disyorkan untuk mengelakkan penggunaan fungsi zum secara berlebihan dalam pengeluaran halaman web untuk mengelakkan pemecahan halaman dan kemerosotan pengalaman pengguna.

Atas ialah kandungan terperinci javascript menetapkan peratusan zum pelayar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!