Bagian CSS
Pertama, buat kelas baru untuk penilaian, dan kemudian gunakan kueri media untuk menetapkan nilai yang berbeda ke atribut z-index dari kelas ini. Kelas ini hanya digunakan sebagai JavaScript yang dibaca, sehingga perlu dipindahkan dari jendela layar sehingga penampil tidak terlihat untuk menghindari situasi yang tidak terduga.
Sebagai demonstrasi, kode berikut menetapkan empat status perangkat: Versi Normal Desktop, Versi Desktop Layar Kecil, Versi Tablet dan Versi Seluler.
/ * status default */. State-indikator {position: absolute; TOP: -999EM; Kiri: -999em; z-index: 1;}/ * desktop kecil */@media all dan (max-lebar: 1200px) {.state-indikator {z-index: 2; }}/ * tablet */@media all dan (max-width: 1024px) {.state-indikator {z-index: 3; }}/ * Ponsel */@media semua dan (max-width: 768px) {.state-indikator {z-index: 4; }}JavaScript Judgment
CSS sudah ada, jadi Anda perlu menggunakan JavaScript untuk menghasilkan objek DOM sementara, kemudian mengatur kelas yang sesuai untuk itu, dan kemudian membaca nilai z-index dari objek ini. Metode penulisan asli adalah sebagai berikut:
// Buat indikator elementvar state-indikator = document.createElement ('div'); indikator.classname = 'state-indikator'; document.body.appendChild (indikator); // buat metode yang mengembalikan perangkat statefunction getDeviceState () {return parseint (window.getcomputedstyle (indicory) {return parseint (window.getcomputextyle (indicory) {return parseint (window.getcomputextyle (indikator). 10);} getDeviceState () Fungsi mengembalikan nilai z-index. Untuk meningkatkan keterbacaan, Anda dapat menggunakan fungsi sakelar untuk menstandarkan output: fungsi getDeviceState () {switch (parseInt (window.getComputedstyle (indikator) .getPropertyValue ('z-index'), 10)) {case 2: return 'small-desktop'; merusak; Kasus 3: return 'tablet'; merusak; Kasus 4: Return 'Phone'; merusak; Default: return 'desktop'; merusak; }}Dengan cara ini, Anda dapat menggunakan kode berikut untuk menentukan status perangkat dan kemudian menjalankan kode JavaScript yang sesuai:
if (getDeviceState () == 'tablet') {// kode javascript dieksekusi di bawah tablet}Jika Anda menggunakan jQuery di sini, cukup gunakan kode berikut:
$(function(){ $('body').append('<div></div>'); function getDeviceState() { switch(parseInt($('.state-indicator').css('z-index'),10)) { case 2: return 'small-desktop'; break; case 3: return 'tablet'; break; case 4: return 'phone'; break; default: return 'Desktop';Buat dulu, lalu dapatkan, dan akhirnya hapus node ini. Perangkat spesifik akan menjadi output di konsol Anda. Klik di sini untuk melihat demo. Anda dapat mencoba menyeret batas tengah dan klik Run.