Viewport

O viewport é a área visível de uma página web ou aplicação na tela do usuário em um determinado momento. Em um computador desktop, o viewport corresponde à janela do navegador menos as barras de ferramentas, barras de rolagem e chrome do navegador. Em tablets e smartphones, o viewport é toda a área da tela que o navegador pode utilizar. O viewport determina como o conteúdo é escalado, organizado e apresentado ao leitor. Em HTML, a tag `<meta name="viewport">` informa ao navegador como controlar as dimensões e escala da página, sendo a base do [design responsivo](/glossary/responsive-design).

Conteúdo que ignora diferenças de viewport entrega uma experiência de leitura ruim em determinados dispositivos. O texto pode ficar ilegível em celulares, botões podem ser impossíveis de tocar, ou pode ser necessário rolar horizontalmente para ver a página inteira. Como dispositivos móveis representam a maior parte do tráfego web, publicações que não se adaptam a diferentes tamanhos de viewport perdem leitores e parecem pouco profissionais. Mecanismos de busca também consideram a compatibilidade móvel no ranking, então o tratamento adequado do viewport afeta tanto a experiência do usuário quanto a visibilidade nos resultados de pesquisa.

As publicações do FlipLink são totalmente responsivas e se adaptam automaticamente a qualquer tamanho de viewport. O visualizador de [flipbook](/glossary/flipbook) detecta as dimensões disponíveis do viewport e ajusta a renderização das páginas, posicionamento dos controles e níveis de zoom adequadamente. Em viewports de desktop amplos, as publicações são exibidas em [formato de páginas duplas](/glossary/page-spread). Em viewports móveis estreitos, alternam para visualização de página única com navegação amigável ao toque. As configurações de [experiência de página](/features/page-experience-and-layout) permitem que os editores escolham entre diferentes modos de layout, e o FlipLink gerencia os cálculos do viewport para manter o conteúdo sempre legível e bem proporcionado. Ao incorporar um flipbook usando o código de [incorporação responsiva](/features/sharing-and-distribution), ele preenche automaticamente seu contêiner e responde a mudanças de viewport — incluindo rotação do dispositivo — sem configuração adicional.

O viewport é controlado pela meta tag HTML `<meta name="viewport" content="width=device-width, initial-scale=1">`. Esta tag instrui o navegador a definir a largura da página igual à largura da tela do dispositivo e iniciar com zoom 1x. Sem ela, navegadores móveis renderizam páginas com uma largura virtual de aproximadamente 980 pixels e depois reduzem o resultado para caber, tornando o texto minúsculo e as interações difíceis. As propriedades-chave do viewport incluem: - **width**: Define a largura do viewport. `device-width` corresponde à largura real da tela em pixels CSS. - **initial-scale**: Controla o nível de zoom quando a página é carregada pela primeira vez. Um valor de `1` significa sem zoom. - **maximum-scale** e **user-scalable**: Controlam se os usuários podem usar pinch-to-zoom. Diretrizes de acessibilidade recomendam permitir o zoom. - **viewport-fit**: Em dispositivos com entalhes ou cantos arredondados, `viewport-fit=cover` estende o conteúdo para a área segura. Media queries CSS utilizam dimensões do viewport para aplicar estilos diferentes. Por exemplo, `@media (max-width: 768px)` direciona viewports mais estreitos que 768 pixels CSS, que é um breakpoint comum para a transição de tablet para mobile.

**"Viewport e resolução de tela são a mesma coisa."** Não são. Um celular pode ter resolução de tela de 1170 x 2532 pixels físicos, mas um viewport de 390 x 844 pixels CSS. O device pixel ratio (DPR) preenche a diferença — nesse celular, o DPR é 3, o que significa que cada pixel CSS corresponde a 9 pixels físicos. Designers trabalham em pixels CSS (o viewport), não em resolução física. **"Definir `user-scalable=no` melhora a experiência."** Impedir o zoom prejudica a acessibilidade para usuários com deficiências visuais. Padrões web modernos e muitas auditorias de acessibilidade apontam isso como uma falha. O visualizador do FlipLink permite pinch-to-zoom por padrão enquanto mantém a integridade do layout. **"Tamanhos de viewport de desktop são consistentes."** Viewports de desktop variam muito. Um usuário com monitor de 27 polegadas e ferramentas de desenvolvedor abertas no navegador pode ter um viewport de apenas 900 pixels — bem dentro do território de tablets. Publicações responsivas devem se adaptar às dimensões reais do viewport, não a categorias de dispositivos presumidas.

O viewport é a janela através da qual os leitores veem seu conteúdo. Publicações que respondem ao tamanho do viewport entregam uma experiência consistente e profissional em qualquer dispositivo — de um celular de 4 polegadas a um monitor de desktop de 32 polegadas — sem que o leitor perceba a adaptação acontecendo.