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

  • Um designer organizado ganha tempo e poupa aborrecimentos.

    Bagunça e confusão não andam de mãos dadas com trabalhos de qualidade. O designer Dan Rose explica por que você deve sempre criar arquivos organizados.

  • SEO - Como melhorar o ranking do seu site modificando o título da página

    O conteúdo do seu site é o elemento mais importante para ter um bom raking nos motores de buscas. Não basta apenas ter um website bonito se a informação textual da sua página é pobre e mal escrita. O título da sua página, e como o restante do conteúdo se relaciona com esse título tem um grande peso no seu ranking, especialmente para o Google. Saiba como definir seus títulos pensando no SEO da sua página.

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