Uma análise bem legal de 120 mil dispositivos e o viewport de todos eles.
“Viewport” é o espaço em tela que a página web é renderizada.
Muitos frameworks, guias de boas práticas e gurus orientam o uso de “pontos de quebra” (“breaking points”) para leiautes responsivos com base no viewport padrão de alguns dispositivos mais populares, como a resolução máxima de monitores ou tamanho de tela de celulares.
O que esse experimento demonstra é que essa abordagem não rende bons resultados, e que deveríamos trabalhar com leiautes fluídos em vez de pensados em resoluções específicas.
PS: O leiaute desse site, ao menos na tela grande do computador, é muito legal.
PS2: O Manual trabalha com dois pontos de quebra: 570 px (para celulares) e 830 px (tablets e janelas pequenas). Sempre testo no simulador do Safari e aproveito a variedade de leiautes do modo iPad para ver como o leiaute se comporta em diferentes larguras (o comprimento da tela é indiferente para o nosso leiaute).
Bem legal esse estudo!
A chegada das container queries deve ajudar a tirar essa ideia da cabeça de designer e desenvolvedores. Com elas, os breaking points variam por componente, não por tela.
Não vejo a hora. Disso e de suporte ao has no Firefox.