Sección CSS
Primero, cree una nueva clase para el juicio y luego use consultas de medios para asignar diferentes valores al atributo del índice Z de esta clase. Esta clase solo se usa como lectura de JavaScript, por lo que debe moverse fuera de la ventana de la pantalla para que el espectador sea invisible para evitar situaciones inesperadas.
Como demostración, el siguiente código establece cuatro estados de dispositivo: versión normal de escritorio, versión de escritorio de pantalla pequeña, versión de tableta y versión móvil.
/ * Estado predeterminado */. Estado-Indicador {posición: Absolute; arriba: -999em; Izquierda: -999em; Z-índice: 1;}/ * Desktop pequeño */@Media all y (max-width: 1200px) {.State-Indicator {Z-Index: 2; }}/ * tableta */@medios all y (max-width: 1024px) {.state-indicator {z-index: 3; }}/ * teléfono móvil */@medios all y (max-width: 768px) {.State-Indicator {Z-Index: 4; }}Juicio de JavaScript
CSS ya está en su lugar, por lo que debe usar JavaScript para generar un objeto DOM temporal, luego establecer la clase correspondiente para ella y luego leer el valor del índice Z de este objeto. El método de escritura nativa es el siguiente:
// Crear el indicador de estado indicador indicador = document.createElement ('div'); indicator.className = 'state-indicator'; document.body.appendChild (indicador); // Cree un método que devuelve el estado de la funcion de dispositivo getDeviceS 10);} getdevicestate () La función devuelve el valor del índice z. Para mejorar la legibilidad, puede usar las funciones de Switch para estandarizar la salida: function getDeviceState () {switch (parseInt (window.getComputedStyle (indicador) .getPropertyValue ('Z-Index'), 10)) {caso 2: return 'Small-desktop'; romper; Caso 3: devolver 'tableta'; romper; Caso 4: devolver 'teléfono'; romper; Valor predeterminado: return 'Desktop'; romper; }}De esta manera, puede usar el siguiente código para determinar el estado del dispositivo y luego ejecutar el código JavaScript correspondiente:
if (getDeviceState () == 'Tablet') {// Código JavaScript ejecutado en la tableta}Si está utilizando jQuery aquí, simplemente use el siguiente código:
$ (function () {$ ('body'). append ('<div> </div>'); function getDeviceState () {switch (parseInt ($ ('. 'Escritorio';Cree primero, luego obtenga y finalmente elimine este nodo. El dispositivo específico se emitirá en su consola. Haga clic aquí para ver la demostración. Puede intentar arrastrar el borde central y hacer clic en Ejecutar.