Preciso fazer um estilo.css para mobile e outro para web .
-
1o que hoje em dia se faz, não é saber se o utilizador está a ver em Web ou Mobile, mas sim, crias estilos para os diferentes tamanhos de ecrãn: getbootstrap.com/css/#grid-media-queries– balexandreCommented 28/08/2015 às 12:44
-
2Não é necessário escrever um arquivo pra cada versão, você pode usar media queries, dê uma lida nesses dois artigos: Design Responsivo na prática: do rascunho ao digital e Design Responsivo na prática 2: do layout ao HTML– LaerteCommented 28/08/2015 às 12:45
-
Eu sei e eu uso ele . vou responder a minha propia pergunta e anexar a imagem pra vcs verem o problema. @balexandre– Jose Vieira NetoCommented 28/08/2015 às 12:52
-
1Se você tem alguma outra informação para acrescentar, que ajude no entendimento do problema, edite sua pergunta e adicione as informações lá.– emanuelsnCommented 28/08/2015 às 13:03
2 Respostas
Eu desconheço algo que separe totalmente mobile de desktop, pois você possui muitos fatores que podem influenciar isso, como por exemplo, ainda existem mobile que não possuem touch, existe o aspect ratio do dispositivo onde você não pode simplesmente dizer que 800px é mobile ou não. tudo depende do que você precisa fazer!
caso você queira apenas fazer um layout responsivo você pode delimitar min ou max width atravês de media query. recomendo essas duas leituras: Tableless e MDN.
Agora, caso você queira verificar a questão do touch você pode utilizar esse código em javascript:
if(('ontouchstart' in window)){ //seu cod. aqui! }
Se puder definir melhor oque você precisa posso te auxiliar mais a fundo.
-
Acho que na prática o que a maioria faz é detectar no lado servidor se o dispositivo é móvel, e manda uma página diferente, ou um CSS diferente pelo menos, conforme o tipo. Em PHP eu uso a classe mobiledetect.net– epxCommented 28/08/2015 às 14:35
-
Excelente comentario epx! você também tem essa opção Jose, tudo dependo do que você precisa, eu particularmente procuro fazer essas verificações no client-side, mas nada impede que você faça essa verificação no servidor também. Commented 28/08/2015 às 14:59
-
qual verificação cliente-side você usa @DorivalZanetto ? Commented 31/08/2015 às 18:04
-
Depende muito do que eu preciso Jose, por exemplo se eu preciso de uma modificação para landscape/portrait eu utilizo a orientation da media query, se é pra fazer um responsivo para telas pequenas eu uso o min-width ou max-width como valor da query, isso vale para height também, se for touch utilizo o trecho de Js que te mandei acima.. Como eu te disse, tudo depende do que eu preciso, de uma olhada nas referencias que te mostrei! O que necessariamente você precisa fazer? Commented 31/08/2015 às 18:49
function isMobile() {
return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER['HTTP_USER_AGENT']);
}
Pessoal tem um script que detecta onde sua aplicação está sendo acessada segue o link abaixo : http://wbruno.com.br/expressao-regular/detectando-browser-mobile-javascript/
-
Poderia trazer um pouco do conteúdo do link para o corpo da sua resposta? Links constantemente quebram, sendo assim, respostas que se baseiam apenas no link acabam ficando obsoletas mais rapidamente e são removidas. Entretanto, sempre é bom deixar o link como referência :)– Math ♦Commented 18/09/2015 às 15:31