Verificar se dispositivo é PC ou Celular com JavaScript

Neste artigo você vai aprender a verificar se dispositivo é PC ou Celular com JavaScript, de várias formas com JS puro

Fala programador(a), beleza? Bora aprender mais sobre como verificar qual o dispositivo que o usuário do site está utilizando!

Há uma função bem utilizada para este fim, que tem como objetivo checar o userAgent, ou seja, qual o dispositivo que o usuário está acessando o site

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Veja na prática:

function checkDevice() { 
 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    return true; // está utilizando celular
  }
 else {
    return false; // não é celular
  }
}

console.log(checkDevice()); // false - estou no PC

Basicamente a um if na função que verificar o userAgent, se bater com algum destes informados o usuário está em um dispositivo mobile

Porém confiar cegamente no userAgent pode também ser um problema, uma vez que novos dispositivos podem ser criados, invalidando as opções apresentadas

E também alguns navegadores conseguem simular a experiência mobile de forma fiel, burlando esta validação

Se caso você não tenha uma regra de negócios muito complexa atrelada ao software, por exemplo: é apenas uma mudança visual

Não há problemas em detectar desta maneira ou também por largura de tela, com a propriedade width de screen ou até condicionar o layout a media queries com @media

Veja também o artigo de como desativar um campo de texto com JavaScript puro

Conclusão

Neste artigo vimos como verificar se dispositivo é PC ou Celular com JavaScript

Utilizamos uma função que verifica o userAgent, e detecta se o dispositivo é mobile ou não

Porém devemos tomar cuidado com esta validação, uma vez que o comportamento pode ser simulado por alguns navegadores sem muitas dificuldades

Caso a alteração seja apenas visual, não há grandes problemas, já se você quer exibir algo atrelado a informações sensíveis deveria utilizar outra abordagem

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube