Executando verificação de segurança...
0
Razante
1 min de leitura ·

Como saber se é pc ou celular com JS !?

Para fins de responsividade é importante saber se o usuário do site está usando um PC ou celular.

Eu uso screen.width/height para saber a largura e altura da tela do dispositivo.

No celular a largura é menor que a altura
No PC é o contrário

x = screen.width;
y = screen.height;

if (x < y) {
É celular
}

o problema é que se a pessoa entrar no site com o celular no modo paisagem vai dar como PC.

Alguém tem um jeito para confirmar que é um smartphone no modo paisagem ? ( sem gambiarras) rs.

Carregando publicação patrocinada...
2
FelipeFernandes

Você pode usar navigator.userAgent para fazer essa verificação.

//Esse código faz um teste e retorna true caso o usuario esteja em um dispositvo movel.

  console.log(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))

Entretanto, vale lembrar que criar um site responsivo é basicamente fazer com que os elementos presentes nesse site fiquem de maneira visivel e organizada, numa cituação onde um usuario utilize seu site com o celular na horizontal, assim como você exemplificou, não seria problema o site se comportar como se estivesse em um computador, desde que os elementos fiquem visiveis e organizados, então é bom pensar em soluções mais simples como media querys para que seu código fique mais organizado e que seja facil de dar manutenção.

1
1
eliaseas

Nada no ambiente web é confiável quando se trata de client side. Se a preocupação é apenas com a usabilidade, ler um user agent "falsificado" não traz risco algum, apenas vai causar uma má experiência ao usuário que fraudou.

1
user1

Há libs como este aqui, mas a maioria está desatualizada. Talvez estudando o código dessas libs você possa chegar em uma solução para o contexto que você precisa.

1
ozono

Usando JS puro ou tá usando algum framework de front end?

A maioria dos frameworks tem referências em que vc configura os elementos de acordo com a largura da portview, independente do dispositivo. Dessa maneira, mesmo que alguém redimensione o tamanho da janela no pc, o código reage de acordo.

1
1
1
1
1
DiegoCrivelaro

Por qual motivo? 🤔

Ele é confiável quando você não tem um sistema de cache como a CloudFlare no plano FREE, pois a CloudFlare cachea o userAgent. Agora se você não possui nenhum provedor de cache e não tem planos de adicionar, eu não vejo motivos para não utilizar o user-agent

1
gaido

Não programe pensando no dispositivo. programe pensando nas dimensões de forma fluida. dessa forma você não precisa se preocupar se é celular ou não especificamente se é celular ou não.

Além disso, pense em capacidades, recursos que o browser tem ou deixa de ter.

Se ainda assim quiser saber se é celular