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

URL: https://dpw.dev/a-viewport-ideal-nao-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.

_Gráfico de rosca com as 10 viewports mais registradas: 390 × 670 (26,2%), 393 × 666 (15,2%), 375 × 635 (14,2%), 390 × 664 (8,2%), 393 × 660 (7,2%), 414 × 721 (7,2%), 375 × 641 (6,2%), 428 × 752 (5,2%), 375 × 559 (5,2%) e 375 × 629 (5,2%)._

- **No Safari**: Site aberto no Safari do iPhone, com a barra de endereço e a de ferramentas embaixo.
- **Em navegador de app**: Site aberto no navegador interno de um app, só com a barra de ferramentas embaixo.
- **Na prévia do 3D Touch**: Site na prévia do 3D Touch, numa janela menor e com o menu de ações do link embaixo.

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](https://social.vasilis.nl/@vasilis/110586308036626591).

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

_Gráfico de 144 pontos: 81 azuis, de viewports mobile, e 63 roxos, de viewports 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](https://support.apple.com/pt-br/guide/ipad/ipad08c9970c/ipados), 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](https://cdn.opensignal.com/public/data/reports/global/data-2015-08/2015_08_fragmentation_report.pdf), as 100 primeiras estão organizadas num layout em alvenaria (masonry). Você também pode [ver todas as 2.300](https://viewports.fyi/all), no site original.

| Largura | Altura | Registros |
| --: | --: | --: |
| 390px | 670px | 8.691 |
| 393px | 666px | 4.800 |
| 375px | 635px | 4.618 |
| 390px | 664px | 2.503 |
| 393px | 660px | 2.318 |
| 414px | 721px | 2.130 |
| 375px | 641px | 1.890 |
| 428px | 752px | 1.692 |
| 375px | 559px | 1.643 |
| 375px | 629px | 1.393 |
| 430px | 746px | 1.231 |
| 412px | 783px | 824 |
| 390px | 663px | 766 |
| 393px | 722px | 577 |
| 414px | 715px | 565 |
| 390px | 669px | 543 |
| 396px | 727px | 540 |
| 412px | 784px | 528 |
| 412px | 771px | 523 |
| 1920px | 937px | 512 |
| 412px | 786px | 504 |
| 360px | 649px | 469 |
| 750px | 346px | 456 |
| 390px | 666px | 443 |
| 393px | 659px | 441 |
| 414px | 725px | 441 |
| 414px | 789px | 429 |
| 414px | 787px | 428 |
| 412px | 770px | 422 |
| 428px | 746px | 417 |
| 390px | 665px | 404 |
| 375px | 548px | 374 |
| 375px | 630px | 367 |
| 414px | 790px | 360 |
| 412px | 760px | 354 |
| 360px | 560px | 354 |
| 1194px | 766px | 333 |
| 430px | 740px | 322 |
| 390px | 661px | 320 |
| 375px | 634px | 319 |
| 1920px | 961px | 301 |
| 375px | 631px | 296 |
| 360px | 682px | 285 |
| 393px | 736px | 285 |
| 360px | 512px | 267 |
| 408px | 764px | 266 |
| 432px | 784px | 254 |
| 390px | 662px | 250 |
| 360px | 667px | 249 |
| 360px | 670px | 236 |
| 393px | 662px | 232 |
| 750px | 307px | 224 |
| 414px | 785px | 223 |
| 1728px | 1000px | 222 |
| 2560px | 1289px | 222 |
| 393px | 698px | 221 |
| 1920px | 929px | 219 |
| 1920px | 944px | 214 |
| 414px | 719px | 212 |
| 360px | 648px | 212 |
| 768px | 960px | 209 |
| 393px | 737px | 208 |
| 384px | 726px | 204 |
| 1920px | 947px | 203 |
| 384px | 723px | 201 |
| 375px | 628px | 199 |
| 724px | 292px | 195 |
| 734px | 349px | 193 |
| 375px | 633px | 192 |
| 384px | 713px | 190 |
| 375px | 632px | 190 |
| 393px | 780px | 186 |
| 1920px | 919px | 185 |
| 378px | 711px | 184 |
| 375px | 626px | 184 |
| 1536px | 827px | 183 |
| 320px | 460px | 180 |
| 393px | 658px | 178 |
| 2560px | 1287px | 175 |
| 1366px | 956px | 175 |
| 428px | 748px | 173 |
| 393px | 732px | 170 |
| 384px | 754px | 170 |
| 485px | 921px | 170 |
| 414px | 714px | 169 |
| 360px | 643px | 165 |
| 375px | 644px | 165 |
| 375px | 627px | 163 |
| 712px | 331px | 160 |
| 712px | 292px | 160 |
| 1800px | 1006px | 159 |
| 360px | 617px | 158 |
| 1680px | 914px | 158 |
| 820px | 1112px | 158 |
| 1412px | 767px | 157 |
| 414px | 699px | 156 |
| 1512px | 833px | 154 |
| 378px | 707px | 153 |
| 2560px | 1297px | 151 |
| 1728px | 994px | 150 |

## Comparações interessantes

### Breakpoints de frameworks populares

- **MD** (Geralmente 768px de largura): 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%.

- [Baixar os dados em JSON](https://viewports.fyi/data.json)
- [Baixar os dados em CSV](https://viewports.fyi/data.csv)

## 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](https://buildexcellentwebsit.es/). 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](https://dpw.dev/css/container-queries-nao-sao-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? [Conhecer o dpw](https://dpw.dev/)

Tradução do [dpw](https://dpw.dev/) • [Original](https://viewports.fyi/) de Leanne Renard, Liridon Hasani e Andy Bell

Publicado originalmente em agosto de 2023, com dados coletados em junho daquele ano.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml