Seção CSS
Primeiro, crie uma nova classe para julgamento e use consultas de mídia para atribuir valores diferentes ao atributo Z-Index desta classe. Esta classe é usada apenas como lida JavaScript, por isso precisa ser movida da janela da tela para que o visualizador seja invisível para evitar situações inesperadas.
Como demonstração, o código a seguir define quatro status do dispositivo: versão normal da área de trabalho, versão de desktop de tela pequena, versão do tablet e versão móvel.
/ * Estado padrão */. Estado-indicador {Posição: Absolute; TOP: -999EM; Esquerda: -999em; Z-Index: 1;}/ * Desktop Small */@Media All e (Max-Width: 1200px) {.State-Indicator {Z-Index: 2; }}/ * tablet */@mídia all and (max-width: 1024px) {.state-indicator {z-index: 3; }}/ * telefone celular */@mídia all e (max-width: 768px) {.state-indicator {z-index: 4; }}Julgamento de javascript
O CSS já está em vigor, então você precisa usar o JavaScript para gerar um objeto DOM temporário e definir a classe correspondente para ele e, em seguida, leia o valor Z-Index desse objeto. O método de escrita nativa é o seguinte:
// Crie o indicador de elemento do indicador de estado = document.createElement ('div'); indicator.className = 'state-indicator'; document.body.appendChild (indicador); // cria um método que retorna o dispositivo de estado (indicador). 10);} getDevicestate () A função retorna o valor de z-index. Para aprimorar a legibilidade, você pode usar as funções do comutador para padronizar a saída: function getDevicestate () {switch (parseint (window.getComputedStyle (indicador) .getPropertyValue ('z-index'), 10)) {case 2: return small-desktop '; quebrar; Caso 3: retornar 'tablet'; quebrar; Caso 4: retornar 'telefone'; quebrar; Padrão: retornar 'desktop'; quebrar; }}Dessa forma, você pode usar o código a seguir para determinar o status do dispositivo e executar o código JavaScript correspondente:
if (getDevicestate () == 'tablet') {// Código JavaScript executado sob o tablet}Se você estiver usando o jQuery aqui, basta usar o seguinte código:
$ (function () {$ ('body'). append ('<div> </div>'); função getDevicestate () {switch (parseint ($ ('. 'Desktop';Crie primeiro, depois obtenha e finalmente exclua este nó. O dispositivo específico será emitido em seu console. Clique aqui para ver a demonstração. Você pode tentar arrastar a borda do meio e clicar em executar.