Depois de ler na php|architect - março 2010 o artigo Advanced Mobile Device Detection with Tera-WURFL por Steve Kamerman fiquei animado em pegar parte do que eu escrevi na apostila que usei no mini-curso da PHP Conference Brazil 2009 e adicionar um exemplo utilizando o Tera-WURFL , mostrar um exemplo “faça você mesmo” e uma simples utilização da IsMobile para identificação dos celulares (nokia, android, iphone e etc) e dispositivos móveis (iPad) mais populares.
Se você usa PHP, você é uma pessoa mais feliz, por isso vai conseguir resolver esse problema bem fácil. O grande segredo fica todo em torno da variável pré-definida $_SERVER, mas precisamente a $_SERVER['HTTP_USER_AGENT'] com o valor dela nós vamos obter o USER AGENT.
Chega de bla bla bla e vamos aos exemplos.
Faça você mesmo
<?php $user_agent = $_SERVER['HTTP_USER_AGENT']; // ou use esse valor aqui para testar // $user_agent = 'Mozilla/5.0 (Linux; U; Android 1.6; en-it; HTC_TATTOO_A3288 Build/DRC79) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1 '; if (preg_match("/HTC_TATTOO_A3288/i",$user_agent) == 1) { echo 'Bem-vindo dono de um HTC TATTOO A3288'; } else { echo 'Bem-vindo amigo, também não tenho dinheiro para ter um HTC TATTOO com Android'; } ?> |
Você pode ficar alternando o valor da string $user_agent para testar, daí pra frente é com você, ou você faz a sua própria solução ou pode utilizar alguma pronta e adaptar para a sua necessidade.
Simples
require_once "caminho/ate/a/classe/ismobile.class.php"; $agents_test = array("Nokia6600/1.0 (4.09.1) SymbianOS/7.0s Series60/2.0 Profile/MIDP-2.0 Configuration/CLDC-1.0", "Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10"); $ismobiuser = new isMobile($agents_test[rand(0,1)]); if ($ismobiuser->CheckMobile()) { $mobileDevice = $ismobiuser -> GetMobileDevice(); switch ($mobileDevice) { case "Nokia": echo "User Agent do seu Nokia é " . $ismobiuser -> GetUserAgent(); break; case "iPad": echo "uUuUui iPad"; break; } } ?> |
Esse foi um exemplo utilizando a classe IsMobile, para identificar se o usuário está acessando o seu site de um iPad ou um celular Nokia. Por ser uma classe fica mais fácil e organizando de você implementar em um site/sistema que já esteja funcionando, também já vem um array populado com os principais dispositivos móveis do mercado, uma interface para implementar log e agora seguindo o Coding Standards da PEAR .
Avançado
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <?php require_once("TeraWurfl.php"); $wurflObj = new TeraWurfl(); $wurflObj->GetDeviceCapabilitiesFromAgent("Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3"); ?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>PorKaria Mobile</title> <?php $max_width = $wurflObj->capabilities['display']['max_image_width']; $max_height = $wurflObj->capabilities['display']['max_image_height']; if ($max_width >= 320 && $max_height >= 360) { ?> <link rel="stylesheet" type="text/css" media="all" href="mobile_iphone.css" /> <?php } else { ?> <link rel="stylesheet" type="text/css" media="all" href="mobile.css" /> <?php } ?> </head> <body> ... </body> </html> |
Nesse exemplo nós identificamos que o celular é um iPhone, alteramos o CSS do site de acordo com o tamanho do display do dispositivo. Para instalar e configurar o Tera-Wurfl acesse o guia que está no site do projeto.
O que torna essa identificação avançada, é a possibilidade é saber todo os recursos que o dispositivo móvel tem, como tamanho da tela, se tem suporte a bluetooth, mp3, acesso via wi-fi, modelo do browser e por aí vai. Sem falar que ele importa todos os dados do arquivo xml WURFL para uma base de dados mySQL, facilitando muito o acesso aos dados e rapidez no retorno das informações.
Então…
Esses exemplos mostram que a identificação do dispositivo móvel é apenas o inicio no Desenvolvimento Mobile Web, pois a partir dele você consegue informações para aí sim construir um serviço totalmente voltado para mobile. E como informação vale ouro, pensa na quantidade de serviços customizados que você pode criar sabendo de todos os recursos e limitações do seu usuário.
June 11th, 2010 at 15:04
Bruno, como faço apenas para saber se quem está acessando meu site, está em um celular ou tablet, independente do modelo…
Obrigado!
[Reply]
admin Reply:
June 13th, 2010 at 18:28
Opa
Tenta o projeto, Tera-Wurfl, talvez ele tenha uma opção para filtrar por tipos de dispositivos móveis.
[Reply]
August 22nd, 2010 at 17:03
Em busca de adaptações de layout para o mobile site do meu TCC da facul encontrei seus artigos.
Poderia me dizer se através da implementação utilizando “TeraWurfl.php”, para descobrir a resolução do viewport é necessário
fazer alguma modificação no servidor Apache ou no PHP? Pois no servidor que sub-loco online isso não seria possível.
Consegui descobrir o viewport através de um JavaScript simples, porém no Samsung Omnia com IE não foi possível,
pois ele identifica como 1024×768, e eu preciso algo em torno de 300px. Fiz mais ou menos assim:
…
document.write(”);
…
//onde viewportwidth é identificada através do script
Por favor, me indique algum artigo ou dê alguma dica para que eu possa contornar o problema, visando adaptar o meu layout
identificando a largura de cada dispositivo.
Obs.: os elementos HTML são fluidos (100% de largura), portanto se adaptam de acordo com a metatag.
O site que estou desenvolvendo é: http://www.studioaweb.com.br/mobile (em fase de testes por enquanto)
[Reply]