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

  • Dreamweaver - Os segredos para você aproveitar melhor os softwares que usa.

    Uma série de artigos que vão ajudar qualquer designer a ter mais tempo para ser criativo.

  • Como que a tecnologia wearable (vestível) vai impactar seu web design

    Lembra da época em quando usar um relógio com calculadora te fazia sentir como George Jetson ou seu filho Elroy? A tecnologia evoluiu muito, e hoje em dia, você pode fazer chamadas, gravar vídeos, verificar a sua saúde, e comprar um café atraves do seu smartwatch (relógio inteligente), e isso é só o começo. Com o advento do Google Glass, Android Wear, e a promessa distante do Apple iWatch, o mundo está lentamente ficando confortável com a idéia de vestir tecnologia, em vez de segurá-la. Esta idéia de vestir um computador, sem dúvidas, irá mudar a maneira como os usuários interagem com a internet e seu design. O seu design já está prevendo o futuro da internet?

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