Como detectar iOS ou Android com JavaScript

Neste artigo você vai aprender a detectar iOS ou Android com JavaScript, vamos utilizar uma abordagem muito simples!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Detectar se um usuário está usando iOS ou Android pode ser útil em muitos aplicativos web.

Com essa informação, podemos personalizar a experiência do usuário e fornecer recursos específicos para o sistema operacional.

Neste artigo, vamos explorar como detectar iOS ou Android com JavaScript.

Para detectar se um usuário está usando iOS ou Android, podemos usar o objeto navigator.userAgent do JavaScript.

O objeto navigator.userAgent contém informações sobre o navegador e o sistema operacional que o usuário está usando.

Aqui está um exemplo de como detectar iOS ou Android com JavaScript:

const userAgent = navigator.userAgent;

if (userAgent.includes("Android")) {
  // O usuário está usando Android
} else if (userAgent.includes("iPhone") || userAgent.includes("iPad") || userAgent.includes("iPod")) {
  // O usuário está usando iOS
} else {
  // O usuário não está usando iOS ou Android
}

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

Neste exemplo, primeiro obtemos o valor da propriedade userAgent do objeto navigator.

Em seguida, usamos o método includes() para verificar se a string “Android” ou as strings “iPhone”, “iPad” ou “iPod” estão incluídas na string userAgent.

Se a string “Android” estiver incluída, significa que o usuário está usando um dispositivo Android. Se uma das strings “iPhone”, “iPad” ou “iPod” estiver incluída, significa que o usuário está usando um dispositivo iOS.

Se nenhuma dessas strings estiver incluída, significa que o usuário não está usando um dispositivo iOS ou Android.

Também podemos usar o método test() do objeto RegExp para verificar se o usuário está usando iOS ou Android. Aqui está um exemplo:

const userAgent = navigator.userAgent;
const iOS = !!userAgent.match(/iPhone|iPad|iPod/);
const isAndroid = /android/i.test(userAgent);

if (isAndroid) {
  // O usuário está usando Android
} else if (iOS) {
  // O usuário está usando iOS
} else {
  // O usuário não está usando iOS ou Android
}

Neste exemplo, usamos o método match() do objeto RegExp para procurar por uma correspondência de uma das strings “iPhone”, “iPad” ou “iPod” na string userAgent.

Se houver uma correspondência, definimos a variável iOS como verdadeira. Em seguida, usamos o método test() do objeto RegExp para procurar por uma correspondência da string “android” na string userAgent.

Se houver uma correspondência, definimos a variável isAndroid como verdadeira. Finalmente, usamos uma declaração condicional para determinar se o usuário está usando iOS ou Android.

Em resumo, detectar iOS ou Android com JavaScript pode ser feito usando o objeto navigator.userAgent e os métodos includes() ou test() do objeto RegExp.

Essa informação pode ser útil para personalizar a experiência do usuário em aplicativos web e fornecer recursos específicos para o sistema operacional.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Em conclusão, detectar iOS ou Android com JavaScript é uma tarefa importante em muitos aplicativos web que podem ajudar a personalizar a experiência do usuário e fornecer recursos específicos para o sistema operacional.

Para detectar se um usuário está usando iOS ou Android, podemos usar o objeto navigator.userAgent do JavaScript, que contém informações sobre o navegador e o sistema operacional que o usuário está usando.

Podemos usar os métodos includes() ou test() do objeto RegExp para verificar se a string “Android” ou as strings “iPhone”, “iPad” ou “iPod” estão incluídas na string userAgent.

Se a string “Android” estiver incluída, significa que o usuário está usando um dispositivo Android.

Se uma das strings “iPhone”, “iPad” ou “iPod” estiver incluída, significa que o usuário está usando um dispositivo iOS.

A detecção do sistema operacional do usuário pode ser útil em muitos cenários, como a personalização da interface do usuário, a apresentação de recursos específicos do sistema operacional e a resolução de problemas específicos de dispositivos.

É uma funcionalidade importante que todo desenvolvedor web deve conhecer e usar em seus aplicativos web.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

O que é o objeto navigator?

Antes de sair copiando código, bora entender a peça central disso tudo

O navigator é um objeto que o próprio navegador te entrega, cheio de informação sobre o ambiente de quem abriu a sua página

Se você já mexeu com window ou document, ele vive nesse mesmo mundo, é só mais um objeto global que tu acessa direto no JavaScript

E dentro dele mora a propriedade userAgent, uma string que descreve o navegador e o sistema operacional do usuário

É lendo essa string que a gente consegue farejar se o cara tá no Android, no iPhone ou num computador

Bora ver na prática?

includes() ou regex, qual usar?

Os dois resolvem, então fica tranquilo

O includes() é o mais simples de ler, tu bate o olho e entende na hora, ótimo pra quem tá começando

O regex com test() e match() é mais poderoso quando você quer casar vários padrões de uma vez ou fazer a verificação sem se preocupar com maiúscula e minúscula (aquele /i no final)

Pra detectar iOS ou Android no dia a dia, os dois dão conta, escolhe o que te deixa mais confortável de manter depois =)

Dá pra confiar 100% no userAgent?

Aqui vai o aviso que muito tutorial esquece de dar

O userAgent é uma string que pode ser alterada, seja pelo próprio usuário, por extensões ou pelo modo de desenvolvedor do navegador

Ou seja, ele serve muito bem pra personalizar experiência, mostrar um banner, sugerir o app certo na loja

Mas eu não usaria ele como trava de segurança, pra isso não dá

Outra pegadinha: alguns iPads mais novos se identificam como se fossem um computador desktop, então se o seu público usa tablet, faça o teste antes de confiar cego na detecção

Regra de ouro: quando der pra resolver checando se o recurso existe no navegador em vez de adivinhar o aparelho, prefira o recurso