Blog Dicas de Web Design

Como detectar se o dispositivo é móvel

Como detectar se o dispositivo é móvel (portátil) ou não utilizando PHP

Se você está desenvolvendo um website responsivo ou um website que terá um template que funcionará com dispositivos móveis, em algum momento você vai precisar detectar se o site esta sendo acessado por um computador normal, ou um dispositivo portátil. Claro que você pode fazer a maioria das funções utilizando apenas Media Queries no CSS, mas caso queira carregar scripts apenas se o dispositivo for ou não móvel, vai precisar de uma outra forma de detectar isso. Veja como abaixo, utilizando a função strpos() do php para procurar o nome dos dispositivos.

Existem outros métodos mais avançados de detectar que tipo de dispositivo a pessoa esta utilizando para acessar seu site, mas para mim o seguinte é o mais simples para os sites mobile ou responsivo que desenvolvo.

Em qualquer lugar do seu template adicione o seguinte código:

  1. <?php
  2. $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
  3. $ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
  4. $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
  5. $palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
  6. $berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
  7. $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
  8. $symbian =  strpos($_SERVER['HTTP_USER_AGENT'],"Symbian");
  9. if ($iphone || $ipad || $android || $palmpre || $ipod || $berry || $symbian == true): /*Se este dispositivo for portátil, faça/escreva o seguinte */ ?>
  10. Ola! Eu sou um dispositivo portátil
  11. <?php else : /* Caso contrário, faça/escreva o seguinte */ ?>
  12. Ola! Eu sou um computador normal
  13. <?php endif; ?>

Se você quiser utilizar esse código em lugares diferentes na mesma página, carregue as variáveis do código acima no topo da página e utilize apenas a declaração if onde for preciso. Talvez você não queira que apareça uma sidebar (coluna lateral) no celular mas sim no iPad, já que ele é bem maior. Aproveitando que estamos falando do iPad sempre tenha cuidado no que você pretende ou não exibir nele. A melhor opção é deixar o site completo carregar, pois um site otimizado para celulares pode ficar com seu layout bem estranho na tela enorme do iPad.

No topo da página:

  1. <?php
  2. $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
  3. $ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
  4. $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
  5. $palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
  6. $berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
  7. $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
  8. $symbian =  strpos($_SERVER['HTTP_USER_AGENT'],"Symbian");
  9. ?>

Em qualquer outro lugar:

  1. <?php
  2. if ($iphone || $ipad || $android || $palmpre || $ipod || $berry || $symbian == true): /*Se este dispositivo for portátil, faça/escreva o seguinte */ ?>
  3. Ola! Eu sou um dispositivo portátil
  4. <?php else : /* Caso contrário, faça/escreva o seguinte */ ?>
  5. Ola! Eu sou um computador normal
  6. <?php endif; ?>

Eu geralmente utilizo esse script para mudar o jeito em que as galerias dos sites que desenvolvo aparecem em dispositivos portáteis. Por exemplo: não carrego os js para uma galeria lightbox mas carrego outras bibliotecas para uma galeria estilo slide, onde você utiliza a função de deslizar o dedo para mudar as fotos no site, já que é o que estamos acostumados a fazer em celulares e tablets.

Caso tenha alguma dúvida de como implementar esse código no seu site, deixe seu comentário abaixo.

Posts Relacionados

  • 20 lindos exemplos de websites com layouts estilo linha de tempo

    Tenho certeza que a maioria de vocês estão cientes do uso da linha de tempo no design, especialmente porque todos os perfis do Facebook são agora exibidos desta forma. Aqui eu coloquei 20 lindos sites com layout estilo linha de tempo para inspirar os seus próprios projetos.

  • Como habilitar Box Sizing no Internet Explorer 7 e abaixo

    Box Sizing com a opção border- box, permite-nos manter a largura e altura de um elemento, independentemente do tamanho do preenchimento e espessura de borda. Isso faz com que a medição e definição de tamanho de um elemento seja mais fácil. No entanto, CSS3 Box Sizing não funciona no Internet Explorer 7 ( IE7) e versões anteriores. Se o seu site deve suportar o IE7 (por qualquer motivo) e ao mesmo tempo preservar CSS3 Box Sizing, você pode utilizar o seguinte truque.

© 2017 iDesigns Studio. Todos Direitos Reservados.
Design Gráfico e Web Design - Centro, Vitória, ES