MD
Geralmente 768px de largura.
A viewport ideal não existe
Antes de basear decisões de design em meia dúzia de breakpoints rígidos, leve em conta a enorme fragmentação de tamanhos de tela e de viewports dos navegadores.
Foi feito um experimento informal para responder: “quão fragmentados são os tamanhos de viewport?”. Foram reunidos mais de 120.000 registros, com mais de 2.300 tamanhos de viewport únicos. Os dados vieram principalmente de pessoas nos EUA e na Europa, então não representam necessariamente um público global, mas ainda servem para este artigo.
O experimento durou só 48 horas, mas os dados obtidos são bem interessantes. Vamos dar uma olhada.
O que 120.000 registros representam?
É importante entender o tamanho de 120.000 em termos relativos. Para comparar, vamos supor que cada registro é uma pessoa.
O estádio de Wembley tem capacidade para 90.000 pessoas, então os registros lotariam Wembley uma vez e ainda ocupariam mais um terço da capacidade.
A população de Cheltenham, na Inglaterra, é de cerca de 116.000 pessoas, então os registros dariam para povoar mais do que a cidade inteira!
Quais são os tamanhos de viewport mais comuns
Se separarmos as 20 viewports únicas mais registradas, a maioria é de tamanhos pequenos. Dá para supor que sejam dispositivos móveis (principalmente as 10 primeiras), mas também vale lembrar que a viewport varia conforme as condições.
Mesmo num único dispositivo iOS, há no mínimo 3 ambientes em que um site pode aparecer, dependendo do estado do sistema operacional.
-
No Safari -
Em navegador de app -
Na prévia do 3D Touch
Isso não é problema se você constrói de forma fluida e flexível, como mostra este diagrama. Mas se você costuma construir com breakpoints muito específicos e valores fixos para tipografia, dimensionamento e espaçamento, pode descobrir que, mesmo com as melhores intenções, não está oferecendo a melhor experiência a quem usa.
Pegue como exemplo uma interface “pixel perfect” com cabeçalho e/ou rodapé fixos. Ela pode ficar ótima quando você encolhe o navegador de desenvolvimento, mas como fica nas condições descritas acima? Como fica numa viewport minúscula, como a de um relógio inteligente? E num celular na horizontal?
Pelas combinações de proporção e dimensões, dá para afirmar com confiança que esses casos estavam representados nos dados. Além disso, teve gente que confirmou.
Antes de se comprometer com cabeçalhos e/ou rodapés fixos, pense em quanto conteúdo as pessoas vão conseguir ver de fato em condições nada ideais.
“Mobile” vs. “desktop”
Neste experimento, foram registradas só a largura e a altura de cada acesso, medidas com window.innerWidth e window.innerHeight. Qualquer largura acima de 800px foi tratada como “desktop” ou, como também dá para chamar, uma viewport grande.
Mobile Desktop
Talvez você esteja pensando “800px é pequeno demais para desktop”, e, se a medição fosse de telas, você teria razão. Mas aqui a medição é de viewports. A viewport é o tamanho da janela do navegador, não o da tela.
Se você está lendo isto num computador, quantas janelas ocupam a tela inteira? Quanto da tela ocupa o navegador em que você está lendo?
O mais seguro é supor que quem usa desktop ou notebook não ocupa a tela inteira com o navegador. Até quem usa tablet não ocupa a tela inteira com o navegador, então leve isso em conta ao pensar nos layouts para viewports maiores, principalmente se você esconde conteúdo em telas pequenas e o mostra para “quem usa desktop”. Pergunte-se: se esse conteúdo pode sumir nas telas pequenas e não nas grandes, ele é mesmo tão necessário quanto você pensava?
Pense também na enorme fragmentação das viewports “desktop” ao trabalhar com layouts. Sim, configurar layouts e tamanhos de fonte com media queries pode fazer sentido se você usa os clássicos breakpoints de 768px, 1024px e 1280px, mas e toda a variedade de tamanhos entre eles?
Vamos ver todas as viewports
Pronto, os conselhos já foram dados, mas, sejamos sinceros, você veio aqui para ver uma visualização das viewports, não é? Seu desejo é uma ordem.
Inspiradas no relatório de 2015 da OpenSignal sobre a fragmentação de telas no Android, as 100 primeiras estão organizadas num layout em alvenaria (masonry). Você também pode ver todas as 2.300, no site original.
-
- Largura
- 390px
- Altura
- 670px
- Registros
- 8.691
-
- Largura
- 393px
- Altura
- 666px
- Registros
- 4.800
-
- Largura
- 375px
- Altura
- 635px
- Registros
- 4.618
-
- Largura
- 390px
- Altura
- 664px
- Registros
- 2.503
-
- Largura
- 393px
- Altura
- 660px
- Registros
- 2.318
-
- Largura
- 414px
- Altura
- 721px
- Registros
- 2.130
-
- Largura
- 375px
- Altura
- 641px
- Registros
- 1.890
-
- Largura
- 428px
- Altura
- 752px
- Registros
- 1.692
-
- Largura
- 375px
- Altura
- 559px
- Registros
- 1.643
-
- Largura
- 375px
- Altura
- 629px
- Registros
- 1.393
-
- Largura
- 430px
- Altura
- 746px
- Registros
- 1.231
-
- Largura
- 412px
- Altura
- 783px
- Registros
- 824
-
- Largura
- 390px
- Altura
- 663px
- Registros
- 766
-
- Largura
- 393px
- Altura
- 722px
- Registros
- 577
-
- Largura
- 414px
- Altura
- 715px
- Registros
- 565
-
- Largura
- 390px
- Altura
- 669px
- Registros
- 543
-
- Largura
- 396px
- Altura
- 727px
- Registros
- 540
-
- Largura
- 412px
- Altura
- 784px
- Registros
- 528
-
- Largura
- 412px
- Altura
- 771px
- Registros
- 523
-
- Largura
- 1920px
- Altura
- 937px
- Registros
- 512
-
- Largura
- 412px
- Altura
- 786px
- Registros
- 504
-
- Largura
- 360px
- Altura
- 649px
- Registros
- 469
-
- Largura
- 750px
- Altura
- 346px
- Registros
- 456
-
- Largura
- 390px
- Altura
- 666px
- Registros
- 443
-
- Largura
- 393px
- Altura
- 659px
- Registros
- 441
-
- Largura
- 414px
- Altura
- 725px
- Registros
- 441
-
- Largura
- 414px
- Altura
- 789px
- Registros
- 429
-
- Largura
- 414px
- Altura
- 787px
- Registros
- 428
-
- Largura
- 412px
- Altura
- 770px
- Registros
- 422
-
- Largura
- 428px
- Altura
- 746px
- Registros
- 417
-
- Largura
- 390px
- Altura
- 665px
- Registros
- 404
-
- Largura
- 375px
- Altura
- 548px
- Registros
- 374
-
- Largura
- 375px
- Altura
- 630px
- Registros
- 367
-
- Largura
- 414px
- Altura
- 790px
- Registros
- 360
-
- Largura
- 412px
- Altura
- 760px
- Registros
- 354
-
- Largura
- 360px
- Altura
- 560px
- Registros
- 354
-
- Largura
- 1194px
- Altura
- 766px
- Registros
- 333
-
- Largura
- 430px
- Altura
- 740px
- Registros
- 322
-
- Largura
- 390px
- Altura
- 661px
- Registros
- 320
-
- Largura
- 375px
- Altura
- 634px
- Registros
- 319
-
- Largura
- 1920px
- Altura
- 961px
- Registros
- 301
-
- Largura
- 375px
- Altura
- 631px
- Registros
- 296
-
- Largura
- 360px
- Altura
- 682px
- Registros
- 285
-
- Largura
- 393px
- Altura
- 736px
- Registros
- 285
-
- Largura
- 360px
- Altura
- 512px
- Registros
- 267
-
- Largura
- 408px
- Altura
- 764px
- Registros
- 266
-
- Largura
- 432px
- Altura
- 784px
- Registros
- 254
-
- Largura
- 390px
- Altura
- 662px
- Registros
- 250
-
- Largura
- 360px
- Altura
- 667px
- Registros
- 249
-
- Largura
- 360px
- Altura
- 670px
- Registros
- 236
-
- Largura
- 393px
- Altura
- 662px
- Registros
- 232
-
- Largura
- 750px
- Altura
- 307px
- Registros
- 224
-
- Largura
- 414px
- Altura
- 785px
- Registros
- 223
-
- Largura
- 1728px
- Altura
- 1000px
- Registros
- 222
-
- Largura
- 2560px
- Altura
- 1289px
- Registros
- 222
-
- Largura
- 393px
- Altura
- 698px
- Registros
- 221
-
- Largura
- 1920px
- Altura
- 929px
- Registros
- 219
-
- Largura
- 1920px
- Altura
- 944px
- Registros
- 214
-
- Largura
- 414px
- Altura
- 719px
- Registros
- 212
-
- Largura
- 360px
- Altura
- 648px
- Registros
- 212
-
- Largura
- 768px
- Altura
- 960px
- Registros
- 209
-
- Largura
- 393px
- Altura
- 737px
- Registros
- 208
-
- Largura
- 384px
- Altura
- 726px
- Registros
- 204
-
- Largura
- 1920px
- Altura
- 947px
- Registros
- 203
-
- Largura
- 384px
- Altura
- 723px
- Registros
- 201
-
- Largura
- 375px
- Altura
- 628px
- Registros
- 199
-
- Largura
- 724px
- Altura
- 292px
- Registros
- 195
-
- Largura
- 734px
- Altura
- 349px
- Registros
- 193
-
- Largura
- 375px
- Altura
- 633px
- Registros
- 192
-
- Largura
- 384px
- Altura
- 713px
- Registros
- 190
-
- Largura
- 375px
- Altura
- 632px
- Registros
- 190
-
- Largura
- 393px
- Altura
- 780px
- Registros
- 186
-
- Largura
- 1920px
- Altura
- 919px
- Registros
- 185
-
- Largura
- 378px
- Altura
- 711px
- Registros
- 184
-
- Largura
- 375px
- Altura
- 626px
- Registros
- 184
-
- Largura
- 1536px
- Altura
- 827px
- Registros
- 183
-
- Largura
- 320px
- Altura
- 460px
- Registros
- 180
-
- Largura
- 393px
- Altura
- 658px
- Registros
- 178
-
- Largura
- 2560px
- Altura
- 1287px
- Registros
- 175
-
- Largura
- 1366px
- Altura
- 956px
- Registros
- 175
-
- Largura
- 428px
- Altura
- 748px
- Registros
- 173
-
- Largura
- 393px
- Altura
- 732px
- Registros
- 170
-
- Largura
- 384px
- Altura
- 754px
- Registros
- 170
-
- Largura
- 485px
- Altura
- 921px
- Registros
- 170
-
- Largura
- 414px
- Altura
- 714px
- Registros
- 169
-
- Largura
- 360px
- Altura
- 643px
- Registros
- 165
-
- Largura
- 375px
- Altura
- 644px
- Registros
- 165
-
- Largura
- 375px
- Altura
- 627px
- Registros
- 163
-
- Largura
- 712px
- Altura
- 331px
- Registros
- 160
-
- Largura
- 712px
- Altura
- 292px
- Registros
- 160
-
- Largura
- 1800px
- Altura
- 1006px
- Registros
- 159
-
- Largura
- 360px
- Altura
- 617px
- Registros
- 158
-
- Largura
- 1680px
- Altura
- 914px
- Registros
- 158
-
- Largura
- 820px
- Altura
- 1112px
- Registros
- 158
-
- Largura
- 1412px
- Altura
- 767px
- Registros
- 157
-
- Largura
- 414px
- Altura
- 699px
- Registros
- 156
-
- Largura
- 1512px
- Altura
- 833px
- Registros
- 154
-
- Largura
- 378px
- Altura
- 707px
- Registros
- 153
-
- Largura
- 2560px
- Altura
- 1297px
- Registros
- 151
-
- Largura
- 1728px
- Altura
- 994px
- Registros
- 150
Comparações interessantes
Breakpoints de frameworks populares
-
Registros: 501
Percentual: 0,42%
-
LG
Geralmente 1024px de largura.
Registros: 367
Percentual: 0,31%
-
XL
Geralmente entre 1200px e 1300px de largura.
Registros: 2.566
Percentual: 2,14%
Breakpoints do Figma
-
“Desktop” padrão
1440px x 1024px
Registros: 20
Percentual: 0,02%
-
iPhone 14
390px x 844px
Registros: 36
Percentual: 0,03% (mas isso é em tela cheia)
Só pela largura (390px), o cenário é bem diferente.
Registros: 14.742
Percentual: 12,29%
-
iPhone 13 mini
375px x 812px
Registros: 0
Percentual: 0%
Só pela largura (375px), o cenário é bem diferente.
Registros: 14.557
Percentual: 12,13%
Qual é o objetivo de tudo isso?
A principal mensagem aqui é que você simplesmente não sabe como as pessoas vão acessar o seu site ou a sua aplicação web. Em vez de tomar decisões de design com base em breakpoints rígidos e limitados, tenha em mente o tamanho da fragmentação de viewports.
A recomendação é sempre ser o mentor do navegador, não o seu microgerente. Crie regras flexíveis e deixe o navegador fazer o que faz de melhor: calcular o melhor resultado com base nas condições em que ele se encontra.
Isso vale desde o planejamento dos projetos. Ao mapear o conteúdo das páginas, pergunte-se como ele vai ficar nos tamanhos de viewport esquisitos, que fogem do padrão. Sempre tente simplificar e condensar o conteúdo para que ele seja útil para todo mundo.
E, por fim, lembre-se sempre de que você não sabe em que condições o seu site vai ser acessado e tem pouco ou nenhum controle sobre isso. Aceite essa falta de controle e use as limitações para estimular a criatividade e, também, focar de verdade o seu trabalho de UX.
Para ir além dos breakpoints de viewport, veja por que container queries não são media queries.
Oi, aqui é o dpw.
Desde 2006, o dpw publica artigos, tutoriais e traduções sobre front-end, sempre em português: HTML, CSS, UI, UX, acessibilidade e performance para fazer sites que funcionam para todo mundo.
Se este conteúdo foi útil, tem muito mais de onde ele veio. Que tal conhecer o resto do blog?