16

quero que fique automático se a pessoa estiver no computador exiba um código se estiver no celular exiba outro diferente. Eu não quero mudar a resolução e sim todo o conteúdo apresentado na pagina. Exemplo: Se for mobile: Você esta conectado por um celular! se por computador você esta conectado por um PC!

Alguém me da uma luz?

5
  • 2
    Você tá usando algum framework CSS? Commented 1/06/2016 às 17:06
  • 1
    Caso não esteja, dê uma olhada em media-queries CSS que pode lhe ajudar. Commented 1/06/2016 às 17:06
  • Talvez esse artigo te ajude devmedia.com.br/utilizando-css-media-queries/27085 Explica bem como funciona
    – A.L Freire
    Commented 1/06/2016 às 17:10
  • 3
    Eu adoraria isso se existisse, mas infelizmente os comitês que normatizam a web são tão ruins, que não existe um jeito simples. Tudo é muito cheio de detalhes, e não fica 100% como deveria ser. Mas tem essas quebrações de galho como media-queries, que não deixam de ser um remendo porco, mas é melhor do que nada. E tou dando +1 na sua pergunta, pq é uma duvida válida, apesar de não ter uma resposta que vá resolver bem atualmente.
    – Largato
    Commented 1/06/2016 às 17:34
  • Tenho pouca experiência, mas ... se você der um debug($_SERVER); e verificar o 'HTTP_USER_AGENT', não conseguirá verificar o tipo de sistema em que o site está rodando? Exemplo de saída: 'HTTP_USER_AGENT' => 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:53.0) Gecko/20100101 Firefox/53.0',, nesse caso é um sistema Ubuntu. Ressucitando Post... Commented 9/06/2017 às 11:31

4 Respostas 4

17

De maneira simples, você pode usar essa função para detectar se é mobile:

function detectar_mobile() { 
 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    return true;
  }
 else {
    return false;
  }
}

Ou usar algo mais profissional:

function detectar_mobile() {
  var check = false; //wrapper no check
  (function(a){if(/(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)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
}

EDIT

Solução para Tablets usando o detectmobilebrowsers.com:

Android tablets, iPads, Kindle Fires and PlayBooks are not detected by design. To add support for tablets, add |android|ipad|playbook|silk to the first regex.


EDIT 2

Outra opção (possivelmente a melhor opção) é utilizar o WURFL:

if (WURFL.is_mobile === true && WURFL.form_factor === "Smartphone") {
    // moblie
} else {
    //nao mobile
}

Só um detalhe sobre a licença dele:

You can use these services free of charge, as long as your website is publicly available and does not require fees or paid subscription to access.

6
  • Gostaria de saber o porquê do -1 Commented 1/06/2016 às 19:22
  • 4
    Não vou julgar os votos, mas mesmo antes da sua resposta eu já ia comentar aqui que confiar no user-agent não funciona. Quanto à solução "profissional", tem isso na página: "Regex updated: 1 August 2014". Infelizmente usar o user-agent somente daria certo se realmente houvesse algum tipo de centralizador sempre atualizado. Lembrando ainda que cada OS de mobile hoje permite o uso de uma diversidade de browsers, cada um implementando user-agent com critério próprio. (por acaso fui ver sua recomendação pra ver se tinha alguma solução boa lá, pq realmente essa do mobile é um problema)
    – Largato
    Commented 1/06/2016 às 19:24
  • Não disse que era profissional e sim mais profissional. O site detectmobilebrowsers.com é mais confiável porque ele atualiza o regex. Commented 1/06/2016 às 19:27
  • 3
    Mas foi aí mesmo que eu vi que faz quase 2 anos que nao é atualizado. Veja no pé da página "Regex updated: 1 August 2014" - Mais uma curiosidade: seu script não tá pegando o meu celular, um Nokia N900. Vou ver se o deles pega. UPDATE: o deles inclui o maemo.
    – Largato
    Commented 1/06/2016 às 19:27
  • 1
    Vou testar esse cara aí do edit2. Talvez por ter alguma fonte de renda, tenha mais chance de ser mais atualizado. Tem solução server-side tambem scientiamobile.com/page/wurfl-cloud, mas não achei o link. De qq forma, o forum é bem ativo scientiamobile.com/forum/viewforum.php?f=20
    – Largato
    Commented 1/06/2016 às 19:54
7

Não tente detectar se o dispositivo é móvel ou de mesa através do navegador, isso é menos confiável do que verificação de maioridade em entrada de site pornô. O próprio Chrome mobile tem uma opção pra se passar pelo Chrome desktop, e nem é uma opção avançada. Está no menu básico do aplicativo.

Se você tentar determinar se um dispositivo é mobile pelo user agent do navegador, a única coisa que você garantirá é que novos navegadores móveis não receberão a experiência móvel ao acessar o seu site.

Se você tentar determinar se o dispositivo é um celular pelas suas capacidades (i.e.: detectar se o dispositivo oferece suporte a toque), você terá resultados bizarros. Meu laptop, por exemplo, é sensível a toque. Imagine um site com layout de celular renderizado em uma tela de 15". Isso quando eu não plugo ele na televisão...

A forma correta de desenvolver páginas é ser agnóstico com relação ao tipo de dispositivo. Sirva layout com base na resolução, mas de forma que se ajuste automaticamente à janela sem precisar recarregar a página. Isso é possível com o bootstrap, por exemplo, por isso eu o recomendo.

Com relação a Javascript, detectar se o navegador é móvel é uma prática pior ainda. Só porque determinada funcionalidade tem problemas em um modelo de celular não quer dizer que terá os mesmos problemas em outro modelo, e vice-versa. Assim, de duas uma: ou você priva todos os usuários dos navegadores móveis atuais de algo que seria interessante, ou você serve funcionalidades potencialmente quebradas para todos. O melhor é determinar quais funcionalidades javascript servir com base nas capacidades do aparelho, não com base no nome do navegador. Existem bibliotecas que auxiliam bastante nisso. Eu recomendo modernizr.

-1

Use screen.width para pegar a largura da tela

var largura = screen.width;

if( largura <= ? ) {  

       //   
}

Essas informações você precisa confirmar:

  • tablets e telefones tem a largura de 767 para baixo

  • Telefones tem a largura de 480 para baixo

5
  • eu não quero mudar a resolução e sim todo o conteúdo apresentado Commented 8/06/2016 às 2:41
  • Cara, ainda acho que o que passei resolve. Com screen.width você pega a largura da tela de quem esta acessando, com a informação da largura, você consegue saber se é um PC, Tablete ou celular! É assim que os sistemas de grids funciona, como o bootstrap, por exemplo. No caso estou falando de javascript, mas se for mexer só com css, você pode utilizar a mesma ideia, com mediaquery w3schools.com/cssref/css3_pr_mediaquery.asp
    – Ed Cesar
    Commented 9/06/2016 às 12:40
  • como falei, eu quero mudar todo o conteúdo pra cada versão Commented 9/06/2016 às 20:48
  • Lucas, se a largura da tela for menor ou igual a 480, então é um celular, e você chama o conteúdo para celulares, caso contrario, você chama o conteúdo para desktop. Pelo o que você disse, seria isso. Caso não, tente explicar de outra forma.
    – Ed Cesar
    Commented 10/06/2016 às 21:26
  • @EdCesar, se eu tiver acessando de um computador e alterar a resolução do meu navegador para a resolução de um celular, o programa vai "mudar", conforme o que o Lucas quer fazer ... Ressucitando post... Commented 9/06/2017 às 11:27
-1

Achei isto na web, testei e funcionou:

<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
var devices = new Array('nokia','iphone','blackberry','sony','lg',
'htc_tattoo','samsung','symbian','SymbianOS','elaine','palm',
'series60','windows ce','android','obigo','netfront',
'openwave','mobilexplorer','operamini');
var url_redirect = 'http://mobile.seusite.com';
function mobiDetect(userAgent, devices) {
for(var i = 0; i < devices.length; i++) {
if (userAgent.search(devices[i]) > 0) {
return true;
}
}
return false;
}

if (mobiDetect(userAgent, devices)) {
window.location.href = url_redirect;
}
</script>

Onde esta "http://mobile.seusite.com" e so colocar o seu site ou Directory que quiser.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .