Kaedah JavaScript untuk menentukan peranti menyemak imbas berdasarkan CSS Media Queries_javascript kemahiran

Bahagian CSS

Mula-mula, cipta kelas baharu untuk membuat pertimbangan, dan kemudian gunakan Pertanyaan Media untuk menetapkan nilai yang berbeza kepada atribut indeks-z kelas ini. Kelas ini hanya digunakan untuk membaca JavaScript, jadi ia perlu dialihkan keluar dari tetingkap skrin dan tidak dapat dilihat oleh penyemak imbas untuk mengelakkan situasi yang tidak dijangka.

Sebagai demonstrasi, kod berikut menetapkan empat keadaan peranti: versi biasa desktop, versi desktop skrin kecil, versi tablet dan versi mudah alih.

/* default state */
.state-indicator {
  position: absolute;
  top: -999em;
  left: -999em;

  z-index: 1;
}

/* small desktop */
@media all and (max-width: 1200px) {
  .state-indicator {
    z-index: 2;
  }
}

/* tablet */
@media all and (max-width: 1024px) {
  .state-indicator {
    z-index: 3;
  }
}

/* mobile phone */
@media all and (max-width: 768px) {
  .state-indicator {
    z-index: 4;
  }
}

Penghakiman JavaScript

CSS sudah ada, jadi anda perlu menggunakan JavaScript untuk menjana objek DOM sementara, kemudian tetapkan kelas yang sepadan untuknya, dan kemudian baca nilai indeks-z objek ini. Kaedah penulisan asal adalah seperti berikut:

// Create the state-indicator element
var indicator = document.createElement('div');
indicator.className = 'state-indicator';
document.body.appendChild(indicator);

// Create a method which returns device state
function getDeviceState() {
  return parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
}
getDeviceState() 函数返回的就是 z-index 的值，为了增强一下可读性，可以用 switch 函数来规范输出一下：

function getDeviceState() {
  switch(parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10)) {
    case 2:
      return 'small-desktop';
      break;
    case 3:
      return 'tablet';
      break;
    case 4:
      return 'phone';
      break;
    default:
      return 'desktop';
      break;
  }
}

Dengan cara ini, anda boleh menggunakan kod berikut untuk menentukan status peranti, dan kemudian melaksanakan kod JavaScript yang sepadan:

if(getDeviceState() == 'tablet') {
  // 平板电脑下执行的 JavaScript 代码
}

Jika anda menggunakan jQuery di sini, hanya gunakan kod berikut:

$(function(){
  $('body').append('<div class="state-indicator"></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';
        break;
    }
  }

  console.log(getDeviceState());
  $('.state-indicator').remove();
});

Buat dahulu, kemudian dapatkan, dan akhirnya padamkan nod Peranti tertentu akan dikeluarkan dalam konsol anda Klik di sini untuk melihat Demo Anda boleh cuba menyeret sempadan tengah dan kemudian klik Jalankan.