3

Olá, basicamente quero fazer dois modelos do meu site, um para dispositivos moveis e outro para computadores. Gostaria de fazer um código em CSS que fosse lido apenas por navegadores de PC, mas se eu usar por exemplo :

@media all and (min-width: 1000px) and (max-width: 1700px) {}

eu selecionaria vários PCs mas também seriam incluídos os iPads, o Google Nexus 10, e vários outros. No caso do meu site, seria um problema se os dois tipos de dispositivos carregassem o mesmo código.

Há uma maneira de selecionar apenas computadores ?

1
  • 1
    Sim. Comece a trabalhar com device-width que é a largura do dispositivo ou tela, e não a sua resolução (max-width, min-width). A menos que você tenha uma razão legítima para restringir as folhas de estilo com base na resolução e não o tamanho da janela de exibição, então é só usar min-width / max-width e evitar min-device-width / device-width max .
    – user21847
    Commented 28/02/2015 às 15:33

2 Respostas 2

3

Até onde eu sei, não dá para saber se o usuário está acessando o site através de um desktop usando apenas CSS...você pode alcançar esse resultado usando um pouco de Javascript para detectar o dispositivo do usuário:

var ua = navigator.userAgent;

Aí, você pode trabalhar com os valores retornados e redirecionar o usuário para uma versão específica para mobile, caso o usuário esteja acessando seu site de um dispositivo móvel, ou para a versão para destkops, caso ele esteja acessando de um desktop.

3
  • 1
    Concordo com a sua resposta.
    – Syzoth
    Commented 28/02/2015 às 17:30
  • Não vejo necessidade de utilizar o javascript. Os dispositivos possuem tamanhos de telas diferentes. Manipulando isso você já pode determinar regras em CSS para cada um deles.
    – user21847
    Commented 28/02/2015 às 17:46
  • 1
    @Natan, pois é, acho que depende de cada caso essa decisão...eu também gosto mais da abordagem de condicionar o layout apenas às dimensões da tela e à densidade de pixels...mas os sites maiores customam usar uma versão para mobile e outro para desktop. Acho que depende da necessidade de cada projeto, mas eu também prefiro usar só CSS.
    – monosan
    Commented 1/03/2015 às 0:22
2

Quando você utiliza MIN-WIDTH e MAX-WIDTH ele se refere a largura do browser que você está utilizando atualmente com base na resolução do dispotivo, ou seja, o problema é gerado pois mesmos dispositivos menores como um iphone por exemplo possui a mesma resolução de monitores comuns.

A melhor alternativa é utilizar o DEVICE WIDTH que se refere a largura da tela que o dispositivo aparenta ter (EX: 1024 de uma tela 1024X768) ou seja você não trabalha com resoluções, você trabalha com tamanhos de tela.

Para fazer com que a media querie se baseie nisso é necessário utilizar a metatag VIEWPORT que faz com que a resolução fique do mesmo tamanho que a tela do aparelho, ou quase isso. Ela faz o dispositivo utilizar a largura que aparenta ter e não sua resolução.

Mais sobre o viewport aqui: Manipulando o Viewport

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

OBS: Você pode modifica-lá a sua necessidade alterando o valor dos atributos:

  • width - Define uma largura para o viewport. Os valores podem ser em PX ou “device-width”, que determina automaticamente um valor igual a largura da tela do dispositivo.

  • height - Define uma altura para o viewport. Os valores podem ser em PX ou “device-height”, que determina automaticamente um valor igual a altura da tela do dispositivo.

  • initial-scale - Define a escala inicial do viewport.

  • user-scalable - Define a possibilidade de o usuário fazer “zoom” em um determinado lugar da tela. É ativado quando o usuário bate duas vezes com o dedo em um lugar da tela.

Com isso, seu código irá se basear na largura do dispositivo. Um iphone tem uma largura bem menor que um monitor de 24", ou seja, isso não gerará o problema visto que monitores sempre serão maiores que dispositivos móveis e a media querie utilizará sua largura como base.

Eu considero, esta a alternativa mais viável e que recomendo, já que dispositivos com tamanhos de telas diferentes carregam regras CSS diferentes, ou seja, um dispositivo móvel não exibirá coisas específicas para desktops e vice-versa.

Outra alternativa é trabalhar com device width diretamente nas media queries mas isso é um pouco trabalhoso visto que deve-se adicionar max-device-width, min-device-width em cada media querie.

EX:

@media only screen and (max-device-width: 1024px) { ...
2
  • Estou tentando usar a meta tag viewport, mas tem como eu testar o resultado no PC e sem ter que subir os arquivos ? Commented 6/03/2015 às 2:30
  • Sim, redimensione a largura do browser. No Chrome você pode usar o Developer Tools.
    – user21847
    Commented 6/03/2015 às 11:07

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 .