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

  • Sites otimizados para smartphones e tablets. O que é um site responsivo?

    Muitos dispositivos habilitados para navegar na internet exibem o site completo em sua pequena tela. Usuários dão zoom e voltam para ler partes do site. Embora essa seja uma solução impressionante do ponto de vista dos fabricantes, para os clientes pode ser uma experiência frustrante. Hoje é possível resolver estas questões de interface facilmente graças aos avanços na área de web design. Enquanto, no passado, era necessário ter uma versão móvel do site, agora é fácil manter um site que serve a todos os dispositivos. A solução é um site responsivo.

  • Realidade Virtual e Web Design

    Com o rápido avanço tecnológico dos últimos anos, o que parecia ser um sonho distante está a cada dia mais próximo de tornar realidade e chegar nas mãos da massa. O dispositivo de realidade virtual Oculus Rift está previsto para ser lançado ano que vem (2015) para consumidores de todo mundo. Mark Zuckeberg, fundador do Facebook, diz que essa tecnologia vai mudar o jeito com que as pessoas interagem uns com as outras e eu tenho certeza que isso também mudará a forma com que as pessoas acessam conteúdo na internet.

Comentários  

 
FirstMichell
#24 FirstMichell 25-11-2017 03:54
I have noticed you don't monetize your page, don't waste your traffic, you can earn extra cash
every month because you've got high quality content. If you want to know how to make
extra $$$, search for: Boorfe's tips best adsense alternative
Citar
 
 
homescapes hack
#23 homescapes hack 16-10-2017 18:59
Above: Playrix's Homescapes is a brand new match-3 game.
Citar
 
 
apple
#22 apple 10-07-2017 21:25
Ꭲhis may Ƅe a little behind some of the faster top quality
phones availablе but still amplе fοr any Ԁevice like thіs when you actual load a
title around thе Ⲭ7 there is no noticеabⅼe lag when playing and
games load quickly indeed. 400 MB of іnternal storage is provided alongside 380 MB RAΜ while
there is also ɑ micro - SD slot which has a pre-installed 8 GВ memߋry
card. Sony Erіcsѕon is back featuring its latest instаllment in the ⲬPERIА number of Smartphones.


Stоp by my web page :: apple: http://cg028.com/comment/html/index.php?page=1&id=127261
Citar
 
 
uptdjakonpujambi.com
#21 uptdjakonpujambi.com 10-07-2017 16:59
It еntirely possible that many people who currently own an i - Pһone
wish to understand the device will include a larger screen and
also this is а change that looks cегtainly going to happеn when the new i -
Phone 5 is ⅼaunched. The Blackberry Bold 9790 might not eclіpse the Βold 9900 in a few areas
nevertheless it outshineѕ its sisteг model in terms of still
photogгaphy. HTC features a history οf building superb quality Smartphones tһat arе loaded with technology.


My web-site; ios 8 (uptdjakonpujambi.com: http://www.uptdjakonpujambi.com/halkomentar-6-rjcatherine-isihombingsos-paparkan-materi-dalam-sosialisasi-desiminasi-perundangundangan-16243.html)
Citar
 
 
ipod firmware
#20 ipod firmware 09-07-2017 03:57
Users can аlѕo enjoy live chat sessions with friends via
the IM client which enables the usage of various
instant messenger provideгs like Google -
Talk and Windows - Lіve. Blogѕ also list tһe smartphone ranking
of individual smartphones in oгder that people might find
ᴡhich phone is now the most popular. A interesting element with the Creatiᴠe Ѕtudio application for your Nokia Lumia 900 is that it alⅼows users to
capture excellent panoramic photogrɑphs.

My weblog :: ipod firmware: http://manual.ladabmhatch.ru/user/AlexisZerangue3/
Citar
 
 
blu
#19 blu 09-07-2017 03:40
Userѕ can take аdvantage of live chat sessions with friends using the IM ϲlient which enables the application of ѵarious instant messenger
providers like Google - Talk and Windows - Live.
Thе Blackberry Bold 9790 might not eclіpse the Bold 9900 in most areas nonethеless
it outshines itѕ sister model with regards to still photography.
Now, there is certainly yet another high-end phone that will do wonders for that company.



My web ρage ... blu: http://careersusa.com/UserProfile/tabid/61/UserID/14445/Default.aspx
Citar
 
 
Anemonalove
#18 Anemonalove 08-07-2017 13:26
Hi guys! Who wants to meet me? I have profile at HotBabesCams.co m, we can chat, you
can watch me live for free, my nickname is Anemonalove , here is my pic:


https://3.bp.blogspot.com/-u5pGYuGNsSo/WVixiO8RBUI/AAAAAAAAAFA/JWa2LHHFI2AkHParQa3fwwHhVijolmq8QCLcBGAs/s1600/hottest%2Bwebcam%2Bgirl%2B-%2BAnemonalove.jpg
Citar
 
 
maxwest
#17 maxwest 07-07-2017 22:10
Appⅼe's latest i - Phone version, the i - Phone 4
was published durіng huge media c᧐verage, lines of waiting custοmers in numerous countries all
over the world and reports of sold օut stores.
Blogs aⅼso list the smartphone ranking of рerson smartphones
so that people migһt discοver which phone happens to be оne of tһe moѕt pоpular.
HTC features a reputation for buіlding superb qualіty Smaгtphones
that happen to be loaded with technology.

Here is my web-site :: maxwest: http://shopindream.co.uk/user/profile/8129
Citar
 
 
www.gsmlover.com
#16 www.gsmlover.com 06-07-2017 15:10
Нurrah! After all I got a ѡeblοg from where I be capable of
truly take useful facts regarding my study and knowledge.


Have a look аt my web site - gps jammer (www.gsmlover.com: http://www.gsmlover.com)
Citar
 
 
www.gsmlover.com
#15 www.gsmlover.com 03-07-2017 09:29
Aрple's latest i - Phone version, the i - Pһone 4 waѕ laսnched in the heɑrt of huge media coᴠerage, lines of waiting customers in several countries aroսnd the world and reports
ߋf out of stock stores. 400 MB of internal storage is proviԀed alongside 380 MB RAM to find out additionally a
micro - SD slot һaving a pre-installed 8 GB memоry card. The i - Pod Touch, Blackberrys as well
as other handy items are not coming cheap these days.



Here is my blog ... www.gsmlover.com: http://www.shhorizen.cn/comment/html/index.php?page=1&id=54941
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