[ads2]
Olá a todos, hoje vou passar uma função JavaScript que serve para detectar se o usuário está acessando o site a partir de um dispositivo móvel. Essa função pode ser usada para desenvolvimento de sites responsivos, onde existem duas páginas distintas, uma para computadores e outra para dispositivo móveis, exemplo: www.clubedosgeeks.com.br para computadores e mobil.clibedosgeeks.com.br para dispositivos móveis.
Quando se desenvolve sites responsivos os desenvolvedores optam unicamente por Media Queries, mas pode-se perceber que a internete móvel no Brasil não tem tanta qualidade, isso pode ocasionar uma perca no desempenho do carregamento do site em determinados aparelhos, por isso torna-se mais interessante o desenvolvimento de dois layouts, onde o redirecionamento acontece.
Veja a função:
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='ENDEREÇO PARA MOBILE';
} else {
location.href='Endereço comum';
}
É isso ai galera, até a próxima!
[ads1]
pesquisei diversos até encontrei esta função.
Apenas fiz uma modificação
removi
else {
location.href=’Endereço comum’;
}
Pois ficava dando looping infinito.
Um Abraço!!!
OK Luciano, obrigado pela contribuição! 🙂
Eu uso o WordPress hospedagem da Hostgator..Da pra usar esse código ? Se sim, Como e onde eu adiciono ele ?
Sim, esse código funciona em qualquer site. Você pode adicionar ele no arquivo principal do seu site.
Este codigo vai adicionado onde? no head;?
Pode ser, mas tem que ser dentro da tag
da tag script
estou com eu problema, estou tentando usar isso no site mobile, mais para ele detectar um desktop e mudar de site, pois quando pesquisa no Google, o site, ele mostra o mobile, então fica distorcido no desktop… por favor, me ajude com o inverso. Obrigado.
Não funcionou pra você?
Tente usar assim:
(function(a){(jQuery.browser=jQuery.browser||{}).mobile=/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|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|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(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|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);if(jQuery.browser.mobile){é mobile}else{não é}isso seria um boa ideia, quando o usuário acessar o site errado, aparece a mensagem falando para ele acessar o outro site.. mas o que estava pensando é que quando acessarem o site Mobile via Desktop, ele transferir para o site correto. Não permitindo que ele navegue no site errado.
Bom, eu coloquei nas paginas desktop o script a baixo:
var url_mobile = “http://www.sitedesk.com.br/index.html”;
(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|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|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(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|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,url_mobile);
E nas paginas do site Mobile:
var ua = navigator.userAgent.toLowerCase();
var uMobile = ”;
uMobile = ”;
uMobile += ‘iphone;ipod;windows phone;android;iemobile 8’;
v_uMobile = uMobile.split(‘;’);
var boolMovel = false;
for (i=0;i<=v_uMobile.length;i++){
if (ua.indexOf(v_uMobile[i]) != -1){
boolMovel = true;
}
}
if (boolMovel == false){
location.href='http://www.sitedesk.com.br/index.html';
}
Assim resolveu meu caso, mas queria um código para todos, meu site está ficando poluído de código.. kkkkk
Abraço e muito Obrigado pela Ajuda.
Tiago, você não precisa “encher seu site de códigos”. Você pode usar somente um desses códigos se quiser.
Seu código funcionou perfeitamente, mas estou com uma dúvida e ve se pode me ajudar, queria quando o usuário fosse mobile ia aparece uma mensagem perguntando se queria ver o layout do site em outro formato(mobile) pq meu site nao é mobile, e queria perguntar pro usuario antes de alterar pro sistema mobile.
Usa a função confirm do JavaScript.
Funcionou, porém fica recarregando o site em loop para o endereço adicionado no: location.href=’ENDEREÇO PARA MOBILE’;
Como faço para que isso não ocorra? Para que pare na pagina MOBILE e fique.
Obrigado.
e se eu quiser um codigo para colocar no site mobile impedindo que usuarios desktop acessem? como que faz
Alguém tem algum código para caso eu acessar o site mobile pelo computador ele seja direcionado automaticamente para a versão mobile? Pois tentei utilizar os códigos acima mais não funcionou muito bem.
Por gentileza, eu tenho uma versão desktop e outra mobile em jQuery Mobile. Na versão desktop em qual seção eu incorporo esse script? Entre e ou no e ? Muito Obrigado pela atenção!
mano muito da hora hehehe, excelente essa solução. Estava quebrando a cabeça tentei varias formas, mas so a sua funcionou, muito obrigado mesmo man !