Redirecionando usuários do IPhone para a versão mobile do seu site – JavaScript
July 19th, 2009 | Published in IPhone - Desenvolvimento, JavaScript, Programação em geral | 9 Comments
As pessoas que me acompanham sabem que há pouco mais de um mês adquiri um IPhone.
A minha operadora me ligou oferecendo alguns pontos que valiam desconto na aquisição do aparelho. Não perdi tempo e corri lá buscar.
Desde então as minhas leituras diárias começaram a se voltar mais para IPhone.
Desenvolvimento de aplicativos, desenvolvimento de sites, ‘manhas’ para usar o aparelho, dicas para economizar bateria, e por ai vai.
O que trago hoje aqui faz parte dos meus estudos para criação de sites para o público que usa IPhone, que é, identificar que seu visitante está usando o aparelho e redirecioná-lo para a versão mobile do seu site.
A ideia é bem simples, e, para colocar ela em prática usamos JavaScript.
Primeiro crie um arquivo HTML e o prepare para receber um javaScript dentro das tags do cabeçalho.
<html> <head> <title>::: Teste IPhone :::</title> <script type='text/javascript'> </script> </head> <body> </body> </html>
Deixei apenas o necessário para o HTML funcionar acima.
Coloquei um título para constar, e abri as tags de script onde vai entrar o nosso JavaScript.
Em JavaScript temos um objeto que traz propiedades e métodos do nosso navegador, que é o navigator.
Você pode vê-lo em ação adicionando o seguinte código dentro das tags script:
alert(navigator);
Esse objeto tem propiedades que nos trazem dados como o nome do browser, sua versão, dizer se os cookies estão habilitados e outros.
A propiedade que vamos usar é a userAgent, que traz um conjunto de informações do browser e do dispositivo que está acessando, que é o que precisamos.
alert(navigator.userAgent);
Veja o resultado do código acima ao acessarmos a página. Repare nas informações retornadas:
No Firefox do Linux:
No Safari do Mac:
No Simulador do IPhone:
No própio IPhone:
Reparou que quando estamos lidando com o Iphone, essa informação aparece para a gente na propiedade do objeto ?
Caso estivessemos no IPod Touch, apareceria IPod ao invés de IPhone nas informações.
Agora basta fazer uma verificação para ver se a palavra Iphone ou Ipod está presente nas informações, e, se estiver, redirecionar para sua versão mobile.
Veja o código:
if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1))
{
alert('IPhone!!!');
//Essa linha redireciona você para o endereço que você colocar
document.location = "http://www.flaviosilveira.com";
}
Qualquer dúvida estamos aí…Abraços!!!
July 21st, 2009 at 19:01 (#)
Flávio, quando eu já estava para desistir, achei seu site, que para mim está sendo uma luz no fim do túnel.
Cara, é o seguinte, desenvolvi uma versão para iPhone de um site, digamos que ele esteja acessível através do “www.site.com/mobile.html” ok? Então, como eu faço para que quando acessado “www.site.com” em um pc, abra a “index.html” mas em um iPhone, abra o “/mobile.html”.
Consegui ser claro? Espero que sim!
Conto contigo,
Obrigado!!!
July 21st, 2009 at 19:12 (#)
Flávio, deu certo o que você disse em seu post. Só me resta uma dúvida, se eu acessar de um dispositivo móvel que não seja iPhone, digamos que de um N95, aparecerá a “/index.html” ou o “/mobile.html” ?
Muito obrigado mesmo!
July 22nd, 2009 at 08:07 (#)
Então Victor….
essa solução ai em cima é mais apenas para o IPhone e o IPod mesmo…
Para outros dispositivos, verifique o que ele retorna no alert(navigator.userAgent);, e então adicione isso para a sua verificação…
Qualquer coisa estamos ai…
Abraço!!
July 23rd, 2009 at 12:48 (#)
Fala victor…
Fiz um teste aqui com um N95..
O que ele me retornou foi o sistema operacional que é o Symbian OS e ele também mostra a marca do aparelho. Apareceu um Nokia no meio da variável.
Dá pra adaptar isso para o if dai…
Abraços!!
August 12th, 2009 at 09:23 (#)
Olá, Victor (e Flávio)
também estava louco procurando por esse redirecionamento automático. Mandou bem Victor.
Mas completando a pergunta do Flávio. Será que tem como fazer o reconhecimento pelo sistema operacional? (sou leigo no que se trata de Java)
Assim o aparelho seria indiferente e se amplia a acessibilidade.
se for possível, como inserir os sistemas operacionais listados abaixo como variáveis?
Mac OSX – iPhones, Symbian, Windows Mobile, Android, Linux, BlackBerry – RIM (peguei essa lista no site http://www.baixaki.com.br/info/1416-celulares-e-seus-sistemas-operacionais.htm )
abração!
August 12th, 2009 at 09:59 (#)
Olá, Victor!
Nem mesmo você aceitou um comentário e já venho com outro! rs!
Mas é que quis compartilhar essa possibilidade de redirecionar para a versão mobile do site.
é através da resolução:
if(screen.width < 700){
alert(‘mobile’); //Aqui código para redirecionamento. ‘window.location’
}
encontrei em http://forum.imasters.uol.com.br/index.php?/topic/347261-detectar-versao-mobile/
abração
September 4th, 2009 at 04:19 (#)
Prezado.
Preciso desenvolver um pequeno aplicativo para iPhone. Tudo se dirige à Objetive-C.
Pergunto:
- Pode-se criar aplicações web(html/jScript) para executá-las no iPhone como em qualquer browser?
- qual a limitação?
- o aplicativo é simples: obtém uma tabela de nomes do servidor, apresenta na tela do iPhone, um botão para cada item obtido. O operador escolhe um botão (ou outro objeto que permita escolha) e pode escrever um texto em um campo de texto. A aplicação devolve ao servidor o referencia do botão e o texto digitado.
É isso.
- É possivel?
Agradeço antecipadamente.
September 19th, 2009 at 06:21 (#)
Então….Vamos ver se consigo ajudar….
Quando você faz um site que seja melhor navegado através da tela de um celular, a única limitação é o tamanho da tela.
Java script funciona normalmente.
Até o momento flash não tem nenhum plugin que possibilite que funcione no iphone.
De resto é tranquilo.
Quanto a aplicação, parece bem simples.
Você vai ter que, obviamente, estudar Objective-C e interação com o banco de dados do iphone, que já tem bastante material por aí.
November 10th, 2009 at 23:55 (#)
Flávio como fica a função document.location + o endereço se eu quiser direcionar para um arquivo uma pasta acima da root?
tipo>>>
if ((navigator.userAgent.indexOf(‘iPhone’) != -1) || (navigator.userAgent.indexOf(‘iPod’) != -1))
{
alert(‘IPhone!!!’);
//Essa linha redireciona você para o endereço que você colocar
document.location = “http://www.flaviosilveira.com/pasta/outra_index.html”;
}
quero redirecionar para o mesmo servidor host !!
obrigado pela força abração !!!