Penskalaan yang disebutkan di sini tidak merujuk pada penskalaan ukuran browser, tetapi lebih pada persentase penskalaan konten web browser (tekan Ctrl dan tombol tanda + atau tombol tanda).
Ada banyak cara untuk mendeteksi penskalaan semacam ini. Ruang QQ menggunakan Flash untuk mendeteksi apakah browser sedang menskalakan. Berikut adalah metode JavaScript untuk mendeteksi penskalaan browser.
Untuk IE6, saya mengabaikannya karena IE6 hanya dapat skala teks.
Mari kita bicara terlebih dahulu tentang antarmuka deteksi standar yang disediakan oleh browser. Window.DevicePixelRatio adalah rasio piksel fisik pada perangkat dan piksel independen perangkat. Atribut ini dapat digunakan untuk mendeteksi apakah halaman web diskalakan. Pada browser PC normal, nilai default adalah 1 jika tidak ada zoom secara default. Saat ini, Firefox, Chrome, dll. Didukung dengan baik.
Nah, sudah waktunya untuk berbicara tentang bagaimana IE ditangani. IE menyediakan dua atribut: window.screen.devicexdpi dan window.screen.logicalxdpi. DeviceXDPI adalah piksel fisik yang sesuai pada perangkat, dan LogicalXDPI adalah proporsi piksel independen dari perangkat. Antarmuka deteksi standar estimasi juga didasarkan pada peningkatan metode IE. Nilai default dari dua atribut ini pada sistem di atas Windows XP+ adalah 96, karena nilai default sistem adalah 96dpi.
Untuk browser yang tidak mendukung dua di atas, Anda juga dapat menggunakan dua properti window.outerwidth dan window.innerwidth. Outerwidth Mengembalikan lebar eksternal yang sebenarnya dari elemen jendela, bagian dalam mengembalikan lebar internal yang sebenarnya dari elemen jendela, kedua lebar termasuk lebar termasuk bilah gulir.
Dengan atribut ini, Anda pada dasarnya dapat menyelesaikan browser umum di browser PC. Kode implementasi adalah sebagai berikut:
Jika nilai pengembalian fungsi detectZoom adalah 100, itu adalah level zoom default, jika lebih dari 100, itu diperbesar, dan jika kurang dari 100, itu menyusut.
function detectZoom () {var ratio = 0, screen = window.screen, ua = navigator.useragent.tolowercase (); if (window.devicepixelratio! == tidak terdefinisi) {rasio = window.devicePixelratio; } else if (~ ua.indexof ('msie')) {if (screen.devicexdpi && screen.logicalxdpi) {rasio = screen.devicexdpi / screen.logicalxdpi; }} lain jika (window.outerwidth! == tidak terdefinisi && window.innerwidth! == tidak terdefinisi) {rasio = window.outerwidth / window.innerwidth; } if (rasio) {rasio = math.round (rasio * 100); } rasio pengembalian;};Artikel asli, harap tunjukkan cetak ulang: dicetak ulang dari pengembangan front-end