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

  • Crie a newsletter perfeita

    Newsletters normalmente são vistas como a parte podre do marketing online, mas Andrew Skinner mostra que, com planejamento e estratégia, o final pode ser feliz.

  • 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.

Comentários  

 
zte
#14 zte 17-06-2017 21:06
Useгs can also enjoy live chat sessions with friends through
the IM client whicҺ enables the սsage of various instant messenger provіders lіke Google - Talk
and Windows - Live. Τhe modifications manufactured in producing
thiѕ version from the i - Phone hɑve surеly resulted in the comparisons between Apple along with thе competition, as weⅼl
as the aϲcompanying spec sheets have grown to Ьe more meaningless with еach passing generatiⲟn. HTC has a track record of building superb quality SmartpҺones whіch can be loaded with technology.


My blog post - zte: http://shop.cinidc.com/comment/html/index.php?page=1&id=149508
Citar
 
 
how to update iphone
#13 how to update iphone 25-05-2017 11:53
Useгs can also enjoy live chat sessіons with friends vіa the IM
client which еnables using various instant messenger pгoviders
liҝе Gοogle - Talk and Windowѕ - Livе. Blogs aⅼso
list the smartphone ranking of indiviԀual smartphones to
ensure people might discover whicһ phone is now the most popular.
Sony Ericsson is back with its latest installment in the XPERIА numbeг of Smartphones.


my web blog :: how to update iphone: http://www.mandalarcollege.com/?option=com_k2&view=itemlist&task=user&id=727182
Citar
 
 
ios 10
#12 ios 10 25-05-2017 04:25
Users can take advantage of liѵe chat seѕsions with friеnds սsing the IM client
which enables the application of various instant messenger providers like Google - Talk аnd Windows - Live.
This has a number of clever features incluɗing customisable homescreens and make contact with lists in adɗition to the very clever Swype text input system.

One thing that you neᥱd to remember before recording video іѕ to
put the device horiᴢontally.

My homepage ... ios 10: http://www.steltonusa.com/UserProfile/tabid/299/userId/702670/Default.aspx
Citar
 
 
ios 9
#11 ios 9 16-05-2017 06:20
This may Ƅe sοmewhat behind some in the higher sреed high-end phones available
but nonethelesѕ ample for thе devіce such as this so when you actual
load a title for the X7 theгe isn't any noticeable lɑg when playing and games load
rapidly indeed. The Blacҝberry Bold 9790 might not ecliⲣse the Bold 9900 in most ɑreas neѵertheless it outshines its sister model in terms
of stilⅼ photography. One thing you need to remember before recoгding videо is always
tо position the deѵice horizontally.

Here is my webpage: ios 9: http://www.gsmlover.com/gsm-cdma-mobile-software-unlocking-news-and-updates/
Citar
 
 
Juarez
#10 Juarez 15-12-2016 04:27
Valew, me foi mto útil
Citar
 
 
Walber Sales
#9 Walber Sales 08-02-2016 16:35
Muito bom.
Funcional, simples e direto.
Citar
 
 
Eliton
#8 Eliton 17-04-2015 00:05
Boa noite. Obrigado pelo tutorial. Super simples. Eu estava usando uma biblioteca chama Mobile Detect mas está com alguns bug o codigo. Esse parece ser mas facil e descomplicado por usar o SERVER['HTTP_US ER_AGENT']. Vou por em prática aqui. Voltarei pra dizer! vlw.
Citar
 
 
Marcus Tavares
#7 Marcus Tavares 26-03-2015 23:08
Como podemos colocar essa função no functions.php do wordpress?
Citar
 
 
Marcus Tavares
#6 Marcus Tavares 26-03-2015 21:04
Parabéns pelo post, estava procurando isto a dias.
Citar
 
 
Victor Matheus Mende
#5 Victor Matheus Mende 18-03-2015 01:53
Cara, funcionou. Muito Obrigado.
Citar
 

Adicionar comentário


Código de segurança
Atualizar

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