Detectar versão mobile

[adamdiogo 0]

Bom dia

Gostaria de ajuda para a seguinte questão

Fiz um site, e fiz a versão mobile ,

gostaria de saber se é possivel fazer que quando meu site for acessado por um celular ,ele abra a pagina mobile e quando for acessado por um computador va para a pagina normal

como se fazer para ele detectar que esta sendo acessado por uma versão mobile

[Renato Siroma 2]

Eu tentaria pela resolução da tela...

=D

[adamdiogo 0]

e qual seria o codigo para isso?

[Bruno Augusto 417]

Com PHP, resolução tela é impossível. Isso é JavaScript.

 

Mas acredito que o mais sensato seria, já que o browser WAP será utilizado, analisar o USER AGENT do mesmo, tal qual você faria se quisesse um controle melhor de inclusão de folhas de estilo CSS para multiplos navegadores sem Comentários Condicionais.

 

Não tenho certeza, pois nem celular eu tenho :(

 

Mas deve haver alguma referência a WAP nessa informação de ambiente.

 

Ou fazer a gambiarra que Photobucket.com fez. A primeira página a ser acessada (index.php) já é a de WAP, porém ela contém um link para a versão completa que deve ser clicado se o acesso for feito via browser comum.

[Renato Siroma 2]

Com PHP, resolução tela é impossível. Isso é JavaScript.

Opnião pessoal : Prefiro fazer o reconheçimento da largura da resolução do cara, e redirecionar para o aplicativo Mobile.

 

 

ASSIM:

 

<script type="text/javascript">
if(screen.width < 700){
   alert('mobile'); //Aqui código para redirecionamento. 'window.location'
}</script>

 

Da forma que o Imaggens falou também funciona, mas como você tem a versão mobile... JavaScript ficaria mais prático.

[Humberto - S.O.S. 2]

// Indentifica o User Agent do navegador cliente

// AAA - Out 09

 

var ua = navigator.userAgent.toLowerCase();

 

var uMobile = '';

 

 

// === REDIRECIONAMENTO PARA iPhone, Windows Phone, Android, etc. ===

 

// Lista de substrings a procurar para ser identificado como mobile WAP

uMobile = '';

uMobile += 'iphone;ipod;windows phone;android;iemobile 8';

 

// Sapara os itens individualmente em um array

v_uMobile = uMobile.split(';');

 

// percorre todos os itens verificando se eh mobile

var boolMovel = false;

for (i=0;i<=v_uMobile.length;i++)

{

if (ua.indexOf(v_uMobile) != -1)

{

boolMovel = true;

}

}

 

if (boolMovel == true)

{

location.href='LINK DO SITE MOBILE';

}

[Lucas (: 0]

Ótimo, o código do Humberto funcinou no meu iPhone.

Agora, como fazer o inverso?

 

Quando um usuario desktop (computadores e notebooks // Mac) acessar a pagina Mobile e ele voltar para a "normal".

 

Exemplo:

 

Usuario Mobile, acessa index.php, vai para mobile.php.

Usuario não-Mobile (ou notebooks) acessa mobile.php e vão para index.php.

 

Entederam? Como faço isso?

[Vinicius Ianni 189]

if (boolMovel == false) { location.href='LINK DO SITE NÃO-MOBILE'; }

[annodam 0]

// Indentifica o User Agent do navegador cliente
// AAA - Out 09

var ua = navigator.userAgent.toLowerCase();

var uMobile = '';


// === REDIRECIONAMENTO PARA iPhone, Windows Phone, Android, etc. ===

// Lista de substrings a procurar para ser identificado como mobile WAP
uMobile = '';
uMobile += 'iphone;ipod;windows phone;android;iemobile 8';

// Sapara os itens individualmente em um array
v_uMobile = uMobile.split(';');

// percorre todos os itens verificando se eh mobile
var boolMovel = false;
for (i=0;i<=v_uMobile.length;i++)
{
	if (ua.indexOf(v_uMobile[i]) != -1)
	{
		boolMovel = true;
	}
}

if (boolMovel == true)
	{
		location.href='LINK DO SITE MOBILE';
	}

 

Como uso esse código?!?! Colei na página + não funcionou...

[annodam 0]

Já consegui de outro jeito:

 

<script language="JavaScript">

(function(a,B){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile|o2|opera m(ob|in)i|palm( os)?|p(ixi|re)\/|plucker|pocket|psp|smartphone|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce; (iemobile|ppc)|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://www.site.com.br/mobile');

</script>

[Cleverson Gouvêa 0]

Esse do Leandro num funcionou legal não... qual desses é o melhor ?

[VascoDaGama 2]

pela resolução do screen é o modo mais simples e inteligente para determinar se não é um pc ou notebook

 

não todos os dispositivos mobile que tem esse rescurso javascript, mas a lógica é simples, se não conseguir detectar provavelmente é um mobile.

 

depois dessa detecção, usndo linguagem do lado do servidor identifique que tipo de aparelho é porque cada um tem sua peculiaridade.

 

durante a navegação deixe sempre fácil acesso a um link para pular para a versão desktop.

[rd111072 1]

E depois de detectar se é celular, como detectar o número desse celular?

[Rodrigo Castro 0]

Já usei esse em alguns sites:

function navegador() {
           navegadorTotal = navigator.userAgent.toLowerCase();

            //Confere se é iphone, ipod e ipad
           if(navegadorTotal.indexOf("iphone") != "-1" || navegadorTotal.indexOf("ipad") != "-1" 
               || navegadorTotal.indexOf("ipod") != "-1"){
               document.write("MOBILE APPLE");
           }else if(navegadorTotal.indexOf("android") != "-1"){
               document.write("MOBILE ANDROID");
           }else if(navegadorTotal.indexOf("j2me") != "-1" || navegadorTotal.indexOf("nokia") != "-1"
               || navegadorTotal.indexOf("symbianos") != "-1" || navegadorTotal.indexOf("opera mini") != "-1"
               || navegadorTotal.indexOf("mobile") != "-1" || navegadorTotal.indexOf("mobi") != "-1"){
               document.write("MOBILE");
           }   
       }

 

O número rd111072 via web não da para pegar, da para fazer aplicativos que peguem o número, mas web não é possível, você consegue pegar o IP, mas ai não resolve muito para você creio eu.

[Rafael Wapbrasil 1]

os javascript dos celulares sao bem precarios e todos estes codigos javascipt acima nao funcionara em 85% dos celuares. A detecçao e feita pelo HTTP_USER_AGENT e redireçionado com "Location". Cabe ao programador montar uma funçao para detectar se o HTTP_USER_AGENT e de um celular ou nao atraves de buscas de string nestas variaveis. por exemplo se em HTTP_USER_AGENT tiver a string Nokia, Sony, MOT, MIDP, WAP, Symbian, LG, GT... etc etc significa que esta sendo acessado pelo celular. Ai você tera que dar uma pesquisada sobre estas "strings" que contem nos browsers eu ja citei as principais acima mais nao esta completa. tambem é usado wap.dominio.com e m.dominio.com para acessar diretamente a versao para celular.

[Gustavo Seganfredo Farias 0]

http://www.google.com.br/search?sourceid=chrome&ie=UTF-8&q=user+agent+php+mobile

 

O primeiro link funciona aqui :)

[Diegus Miestro 21]

Sobre desenvolvimento web multiplataformas eu prefiro o uso das Media Querys do CSS. você pode desenvolver um site para cada resolução existente ou possível. Assim o layout fica flexível não ficando pequeno em algumas resoluções e grandes em outras. Um site bacana sobre isso é o http://www.designadaptavel.com.br/, acessa o site, desmaximiza a tela e vai reduzindo sua largura para você entender o que quero dizer.

[douglasdeodato 2]

concordo com diegus

 

css media queries.

 

Sobre desenvolvimento web multiplataformas eu prefiro o uso das Media Querys do CSS. você pode desenvolver um site para cada resolução existente ou possível. Assim o layout fica flexível não ficando pequeno em algumas resoluções e grandes em outras. Um site bacana sobre isso é o http://www.designadaptavel.com.br/, acessa o site, desmaximiza a tela e vai reduzindo sua largura para você entender o que quero dizer.

[HugoKeyserling 0]

Opa, dá para desenvolver com media queries (CSS), você vai adaptando a cada resolução de tela. Templates responsivos.