O mediarecurso de consulta CSS3 levou a muitas possibilidades interessantes em termos de desenvolvimento de sites que se ajustam a diversos tamanhos e dispositivos de tela.
No entanto, na prática, estou começando a entender que o mediarecurso de consulta CSS3 e todo o movimento "Responsive Web Design" podem não cumprir sua promessa.
O problema que vejo é que, no final do dia, os desenvolvedores da Web se preocupam principalmente com o fato de seus usuários estarem visualizando conteúdo por meio de um computador, tablet ou dispositivo móvel. Mas o CSS3 fornece apenas um meio para detectar a resolução da tela . Em teoria, detectar a resolução da tela parece ser uma ótima maneira de se ajustar a vários dispositivos diferentes. Mas na prática ...
Suponha que tenhamos uma função Javascript simples que apenas gera a largura da tela:
function foo()
{
alert(screen.width);
}No meu Blackberry Touch, isso gera:
768No meu Samsung Galaxy, isso gera:
800Então ... hum, neste momento, a resolução dos principais smartphones está chegando bem perto das resoluções no nível da área de trabalho. A capacidade de detectar se um usuário está visualizando seu site por meio de um smartphone, tablet ou computador parece ser cada vez mais difícil se tudo o que você passa é a resolução da tela.
Isso me leva a questionar toda a sabedoria por trás de todo o movimento CSS3 "Responsive Web Design", com base em consultas de mídia. Parece que o mediarecurso de consulta é mais adequado para se adaptar a uma janela de redimensionamento do navegador em uma tela da área de trabalho, em vez de vários dispositivos móveis.
Outra técnica possível para detectar dispositivos móveis ou tablets é usar a detecção de recursos, verificando se o ontouchstartevento é suportado. Mas mesmo isso está se tornando pouco confiável, pois muitas telas da área de trabalho começam a suportar o toque.
Pergunta: Então ... como desenvolvedor da Web, se não posso confiar no RWD ou na detecção de recursos, o agente do usuário cheira (como notoriamente não confiável como sempre) é realmente a melhor opção para detectar dispositivos móveis?
fonte
device-widthmuito ruim?Respostas:
Pare de se preocupar tanto com dispositivos específicos.
Ele está ficando cada vez mais difícil de detectar por meio de resolução de tela, e isso só vai ficar mais difícil à medida que mais dispositivos de entrar no mercado, mas o propósito de consultas de mídia não é para detectar dispositivo types.What consultas de mídia são bons em está fazendo ajustes para seu projeto quando não é mais agradável usar nas dimensões atuais. Se o site começar a desmoronar com 550 px de largura, não importa se existe um dispositivo com essas dimensões ou não: você define o ponto de interrupção lá.
É o mesmo acordo com a detecção de recursos. Se o dispositivo suportar toque, o que importa se for um dispositivo móvel ou algum monitor futuro do tamanho de uma parede? De qualquer maneira, as melhorias de toque provavelmente serão úteis.
Cheirar agente de usuário - como você afirmou - não é totalmente confiável. Eu poderia mudar minha sequência de agente do usuário para citações de Shakespeare, se realmente quisesse também. O que seu site decidirá sobre o meu navegador?
Os agentes de usuário também exigem muito trabalho para lidar com todas as possibilidades. Você tem um para o Firefox no android? Chrome no IOS? Golfinho em Froyo? O navegador WiiU? O navegador extremamente limitado no meu antigo celular LG? Lince? IE 13? Links? Doninha de gelo? O navegador do manual do Blackberry? Como você está dizendo a diferença entre o Opera rodando em um tablet e o Opera rodando em um telefone?
Essa lista só pode crescer com o passar do tempo.
fonte
Os agentes de usuários também mentem. Se você pesquisar no Google, encontrará listas de agentes do usuário versus realidade. Então isso é um problema. Alguns recorrem à análise da configuração de dpi para determinar qual ou qual tipo de dispositivo é.
fonte