Méthode JavaScript pour déterminer le périphérique de navigation en fonction des compétences CSS Media Queries_javascript

Partie CSS

Tout d'abord, créez une nouvelle classe pour porter des jugements, puis utilisez Media Queries pour attribuer différentes valeurs à l'attribut z-index de cette classe. Cette classe n'est utilisée que pour la lecture JavaScript, elle doit donc être déplacée hors de la fenêtre de l'écran et invisible pour le navigateur pour éviter des situations inattendues.

À titre de démonstration, le code suivant définit quatre états de l'appareil : version de bureau normale, version de bureau sur petit écran, version pour tablette et version mobile.

/* 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;
  }
}

Jugement JavaScript

CSS est déjà en place, vous devez donc utiliser JavaScript pour générer un objet DOM temporaire, puis définir la classe correspondante, puis lire la valeur z-index de cet objet. La méthode d'écriture originale est la suivante :

// 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;
  }
}

De cette manière, vous pouvez utiliser le code suivant pour déterminer l'état de l'appareil, puis exécuter le code JavaScript correspondant :

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

Si vous utilisez jQuery ici, utilisez simplement le code suivant :

$(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();
});

Créez d'abord, puis obtenez et enfin supprimez le nœud. Le périphérique spécifique sera affiché dans votre console Cliquez ici pour voir la démo Vous pouvez essayer de faire glisser la bordure du milieu, puis cliquer sur Exécuter.