Posted by flaviosilveira | Posted in IPhone - Desenvolvimento, JavaScript, Programação em geral | Posted on 19-07-2009
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!!!
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!!!
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!
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!!
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!!
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!
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
Olá, Gabiru,
Infelizmente este if não funciona em alguns celulares, pois possuem mais do que 700px de largura na resolução, mas pode ser uma boa para celulares mais antigos.
Heitor,
Esse é um post bem antigo.
O ideal hoje é usar Media Query do CSS para resolver essas questões.
Vou ver se coloco algo sobre isso em breve.
Abraço!
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.
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í.
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 !!!
Prezados
Não tem nenhum código que ele automaticamente reconheça e jogue para a página movel, tipo o da globo.com, eu entro através do meu Q11 da motorola e ele acessa m.globo.com , meu amigo acessa atraves do LG e funciona do mesmo jeito, teria como fazer isso?
Fala ricardo…
Tem uma solução em javaScript que o pessoal usa que é pegar o tamanho da tela do usuário, e, se ela for menor que 600pixels por exemplo, aí você redireciona ele para a sua versão mobile….
Outra idéia é uma Classe em PHP que um grupo fez que permite até redirecionar o usuário de acordo com o aparelho dele, por exemplo: Galera de IPhone para o mobile1, galera do Blackberry para o mobile2.
Dê uma olhada nesses links:
http://redebiz.net/software/detectar-redirecionar-smartphone-celular/
http://www.acalbuquerque.blog.br/?p=587
Abraço!!
Flavio
boa tarde
brother seguinte eu fiz o site pro iphone, esta no http://www.azurebar.com.br/iphone.html
mas no iphone so abre qnd acesso o site que eu acitei acima, w o http://www.azurebar.com.br qnd aberto no iphone nao abre, como eu faco para direcionar para o /iphone.html?
Oi Paulinho,
É justamente o que eu explico nesse post dá uma olhada. Nos comentários tem uma solução também.
Abraço!
fiz o codigo e não funcionou no meu ipod, ate um simples alert não funciona, não sei pq, perece q o javascript ta ruim e não funciona no meu ipod… alguem tem ideia do q pode ser?
Eu Fiz Assim e meio que deu certo
navegador=navigator.userAgent.toUpperCase();
movel=navegador.indexOf(“MOBILE”);
if (movel>0)
{
document.write(“”);
document.write(“Dispositivo Movel”);
document.write(“”);
}
else
{
document.write(“”);
document.write(“Dispositivo Movel”);
document.write(“”);
}
Aff o certo kkkk e assim
navegador=navigator.userAgent.toUpperCase();
movel=navegador.indexOf(“MOBILE”);
if (movel>0)
{
document.write(“”);
document.write(“Dispositivo Movel”);
document.write(“”);
}
else
{
document.write(“”);
document.write(“Desktop”);
document.write(“”);
}