Web design responsivo x cheirar agente do usuário

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:

No meu Samsung Galaxy, isso gera:

Entã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?

web-development javascript css

— Channel72
fonte

Se o objetivo do Responsive Web Design é (como afirma a Wikipedia ) "fácil leitura e navegação com o mínimo de redimensionamento, panorama e rolagem", então por que você se importa se é um computador ou um celular? O que importa é a resolução e o tamanho da tela, e não o tipo de dispositivo. Não?

— Ruakh

Acho que estou dizendo que a conexão entre a "resolução da tela" e o tamanho real da tela (por exemplo, centímetros / polegadas de largura da tela) está se tornando cada vez mais transitória.

— Channel72

Eu pensei que você deveria fazer algo com a consulta de mídia na largura do dispositivo, porque a largura / resolução está se tornando cada vez mais imprecisa, especialmente com a densidade de pixels de vários monitores, por exemplo, os dispositivos "Retina" da Apple. Portanto, se a largura do dispositivo estiver dentro da largura geral de um dispositivo móvel, você mostrará um layout diferente. Para um usuário de tablet / desktop, apenas mostro o mesmo layout, ou seja, 1024 px de largura.

— Zuallauz 24/05

@zuallauz, o suporte não é device-widthmuito ruim?

— Channel72

Por que não ir em unidades? Dessa forma, as mudanças de conteúdo baseado em texto espaço disponível ...

Respostas:

Pare de se preocupar tanto com dispositivos específicos.

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

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.

— Mike Gossmann
fonte

Bem, um layout de uma coluna geralmente se presta bem a smartphones. Para um tablet, você pode usar um layout de 2 ou mesmo 3 colunas e, para computadores de mesa, normalmente 3 colunas funcionam bem. Independentemente disso, o número ideal de colunas que você exibe geralmente é uma função das capacidades biológicas do olho humano , em vez da resolução da tela. O que quero dizer é que seria bom se houvesse uma correlação mais rígida entre a resolução da tela e a probabilidade de que um humano típico seja capaz de digitalizar facilmente seu site visualmente. Pelo menos, o CSS3 parece assumir essa correlação.

— Channel72

Deveria haver, na verdade. Os pixels CSS devem ser definidos usando ângulos e distâncias, não pixels físicos. Muitos fabricantes estão ignorando isso em suas configurações padrão.

— Mike Gossmann

@ Channel72 Um layout de 1 coluna se presta bem a qualquer largura de tela estreita . Não importa se a largura da tela é estreita porque é um navegador de smartphone ou um desktop em uma janela redimensionada em um monitor gigante. O design responsivo da web tenta acomodar todos os cenários adequadamente, independentemente do agente do usuário.

— Eric King

E se você for exibir uma visão completamente diferente para usuários móveis. Que tal impedir que os usos móveis baixem todos os dados irrelevantes necessários para os usuários de desktop. O agente do usuário é o caminho a percorrer ... #

— John

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 é.

— Roubar
fonte

Se alguém tiver necessidade de fornecer dados falsos nos dados do agente do usuário, ele obterá uma versão padrão do site ... #

— John