Como detectar um dispositivo móvel com javascript

Às vezes, os programadores precisam determinar um aplicativo da web para a presença de um modo de dispositivo móvel. Para esse fim, a detecção de agentes pode ser usada. No entanto, não é recomendável usar a detecção de agentes de usuário para aplicativos da web atuais. A melhor solução para a questão discutida é utilizar a API interna de JavaScript para detectar mídia chamada “janela.MatchMedia ()”. É uma maneira eficiente e mais simples de detectar dispositivos móveis.

Esta postagem descreverá o procedimento para detectar um dispositivo móvel usando JavaScript.

Como detectar um dispositivo móvel com javascript?

Usando o “janela.MatchMedia ()”Método com consultas de mídia CSS para detectar dispositivos móveis em um aplicativo da web com JavaScript. O método MatchMedia () fornece um novo objeto MediaQueryList, que pode ser usado para identificar se o documento corresponde ou não à string de consulta de mídia e para acompanhá -lo para que você possa dizer quando ele corresponde ou não.

Sintaxe
Siga a sintaxe mencionada para detectar o dispositivo móvel em um aplicativo da Web:

janela.MatchMedia ()

Este método gera uma nova lista de “MediaQuery”Objetos que verificam se o documento corresponde à string de consulta de mídia.

Exemplo
No arquivo JavaScript, use uma declaração condicional onde verificaremos a largura da tela do dispositivo. É considerado um dispositivo móvel se a tela for 768px ou menos de 768px. Combine o tamanho da tela com a lista de consultas de mídia retornada do método MatchMedia (). Se corresponder, mostre uma mensagem de alerta “Modo móvel”; caso contrário, é um “Modo de mesa”:

if (janela.MatchMedia ("(Max-Width: 768px)").partidas)

alerta ("modo móvel");
documento.Escreva ("Você está usando um dispositivo móvel.");

outro

alerta ("modo de mesa");
documento.Write ("Você está usando o desktop.");

Saída

O GIF acima mostra quando ajustamos a janela do documento, e a viewport é equivalente ao 768px. Como resultado, uma mensagem de alerta “Modo móvel”Foi exibido.

Conclusão

Para detectar o modo de dispositivo móvel em um aplicativo da web, use o “janela.MatchMedia ()”Método com consultas de mídia CSS. Ele retorna um novo objeto MediaQueryList, que pode ser usado para identificar se o documento corresponde ou não à string de consulta de mídia e para acompanhá -lo para que você possa dizer quando ele corresponde ou não. Este post descreveu o procedimento para detectar um dispositivo móvel com JavaScript.