JavaScript-Methode zur Bestimmung des Browsergeräts basierend auf CSS Media Queries_Javascript-Kenntnissen

CSS-Teil

Erstellen Sie zunächst eine neue Klasse zur Beurteilung und weisen Sie dann mithilfe von Medienabfragen dem Z-Index-Attribut dieser Klasse unterschiedliche Werte zu. Diese Klasse wird nur zum Lesen von JavaScript verwendet und muss daher aus dem Bildschirmfenster verschoben und für den Browser unsichtbar gemacht werden, um unerwartete Situationen zu vermeiden.

Zur Demonstration legt der folgende Code vier Gerätezustände fest: normale Desktop-Version, Desktop-Version mit kleinem Bildschirm, Tablet-Version und mobile Version.

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

JavaScript-Urteil

CSS ist bereits vorhanden, daher müssen Sie JavaScript verwenden, um ein temporäres DOM-Objekt zu generieren, dann die entsprechende Klasse dafür festzulegen und dann den Z-Indexwert dieses Objekts zu lesen. Die ursprüngliche Schreibmethode ist wie folgt:

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

Auf diese Weise können Sie den folgenden Code verwenden, um den Gerätestatus zu ermitteln, und anschließend den entsprechenden JavaScript-Code ausführen:

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

Wenn Sie hier jQuery verwenden, verwenden Sie einfach den folgenden Code:

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

Erstellen Sie zuerst den Knoten, rufen Sie ihn ab und löschen Sie ihn schließlich. Klicken Sie hier, um die Demo anzuzeigen. Sie können versuchen, den mittleren Rand zu ziehen und dann auf Ausführen zu klicken.