Curso de CSS / Verificar layout responsivo: largura, zoom e teclado

O CSS responsivo deve permanecer utilizável em diferentes larguras de tela, níveis de zoom e condições de entrada. Verifique se há conteúdo cortado, rolagem inesperada da página, controles ocultos e foco do teclado invisível, em vez de confiar apenas em uma pré-visualização do tamanho de um telefone.

Prepare uma página para verificações responsivas

O dimensionamento fluido, as media queries e as proporções de imagem estudados na lição anterior são reunidos em uma única página. Se você salvar o código a seguir como responsive-check.html, você poderá ver menus, cards, imagens, linhas longas e formulários de entrada juntos. A imagem está contida no arquivo e nenhuma biblioteca ou servidor separado é necessário.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive-check.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.page { width: min(100%, 64rem); margin-inline: auto; padding: 1rem; }
.menu { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.menu a { display: block; padding: .65rem 1rem; background: #e8f3fa; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card img { display: block; max-width: 100%; height: auto; margin-bottom: 1rem; }
.form { width: min(100%, 28rem); margin-top: 2rem; }
label { display: block; font-weight: bold; }
input { width: 100%; min-width: 0; padding: .65rem; font: inherit; }
button { max-width: 100%; padding: .65rem 1rem; font: inherit; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 42rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="page">
<h1>Check the same page under different conditions</h1>
<nav class="menu" aria-label="Lab Menu"><a href="#cards">Card description</a><a href="#request">Enter your question</a><a href="#result">Record check results</a></nav>
<section id="cards" class="cards">
<article class="card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="Practice illustration showing both the upper and lower bands and the center circle"><h2>Long descriptions can be read to the end if there is no fixed height.</h2><p>Zooming may reduce how much text fits on each line. The description and link below the image must stay visible even when the same content occupies more lines.</p><a href="#result">First card notes</a></article>
<article class="card"><h2>Card with a long identifier</h2><p class="token">REFERENCE_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><p>Long strings are wrapped without deleting the content itself.</p><a href="#result">Second card notes</a></article>
</section>
<form id="request" class="form" action="#request" method="get"><h2>Enter your question</h2><label for="email">Email</label><p id="help">Use test@example.com instead of a real address to try the input styling. This example has no server that stores information.</p><input id="email" name="email" type="email" aria-describedby="help" required><p><button type="submit">Check input format</button></p></form>
<section id="result"><h2>Check results</h2><p>Record the viewport width, zoom level, changed rules, and results in a separate note.</p></section>
</main>
</body>
</html>

Esta página foi inicialmente criada para não ter transbordamento horizontal. Em exercícios posteriores, encontraremos a causa adicionando e removendo o CSS que cria o erro um por um. Se você copiar o arquivo original e deixá-lo como responsive-check-original.html, é fácil reverter caso altere várias propriedades por engano. O envio do formulário é um exemplo que não envia para um servidor de armazenamento e usa o endereço de teste sugerido em vez de informações pessoais reais.

Verifique larguras e teste limites de breakpoint

No Edge, abra o DevTools, habilite a emulação de dispositivo e insira uma largura no modo Responsivo. Os atalhos padrão do Windows são F12 ou Ctrl+Shift+I para o DevTools e Ctrl+Shift+M para a emulação de dispositivo. Os rótulos e posições da barra de ferramentas podem variar conforme a versão; consulte o Guia de emulação de dispositivo do Microsoft Edge. Compare larguras imediatamente abaixo e acima de cada condição, conforme explicado em Media queries e pontos de quebra baseados no conteúdo.

1. A 320px e 390px, verifique se o menu se estende por várias linhas e se a imagem e a caixa de entrada cabem dentro do texto. Role até o final da página e verifique a truncagem de texto e a rolagem horizontal em toda a página.
2. Aumente lentamente a largura e verifique áreas onde os cartões estão muito estreitos ou há espaço desnecessário entre os menus. Você não deve acabar escolhendo apenas alguns dispositivos.
3. Este exemplo muda em 42rem. Com um tamanho de fonte inicial de 16px, compare 671px, 672px e 673px: 671px deve ter uma coluna de cartão, enquanto 672px e 673px devem ter duas.
4. Em telas mais largas, como 1365px e 1920px, verifique se a largura máxima do texto é mantida e se as linhas não estão muito longas. Além da emulação de dispositivos, verifique a operação, teclado virtual e rotação de tela no dispositivo real que está sendo usado.

A emulação de dispositivo é uma ferramenta de aproximação que altera a largura e algumas condições. Ela não replica todas as fontes, controles de toque, teclado virtual e comportamento do navegador de um dispositivo real. Recomendamos que você verifique a situação de entrada onde o teclado virtual aparece na parte inferior da tela no dispositivo real.

Separe zoom do navegador e alterações no tamanho do texto

À medida que o zoom do navegador aumenta a página inteira, a largura da janela de visualização que o CSS pode usar também pode mudar. Aumente o zoom com Ctrl e + no Windows, e volte para a ampliação padrão com Ctrl+0. Configurar o tamanho da fonte ou apenas aumentar a fonte é uma condição para verificar separadamente a relação entre o texto e a caixa. Experimentos com a alteração do font-size do HTML no CSS não devem ser registrados como zoom do navegador.

1. Registre a largura da tela na escala padrão na janela real do navegador e aumente para 200%. Verifique se o texto no menu, na descrição do cartão, no rótulo, na caixa de entrada e no botão não está cortado ou sobreposto.
2. Certifique-se de que seu conteúdo seja legível em ampliações maiores. Quando ampliado em 400% com base na largura de 1280 px CSS, o espaço é equivalente a aproximadamente 320 px CSS, mas o valor real pode variar dependendo da interface do navegador, barra de rolagem, etc.
3. Restaure a escala padrão e verifique novamente alterando significativamente as configurações de fonte do seu navegador. As condições e resultados de alterar a fonte padrão, ampliar a página e modificar o CSS são registrados como itens separados.

Verificações de acessibilidade incluem manter o conteúdo e a função com redimensionamento de texto de 200% e reorganizar o conteúdo normal de rolagem vertical dentro do equivalente a 320 pixels CSS sem rolagem bidirecional. Conteúdos como uma tabela de dados ou mapa podem ter uma exceção justificada em duas dimensões, mas essa exceção não se aplica automaticamente à página inteira. Para mais detalhes, consulte Explicação do ajuste de tamanho de fonte W3C, a explicação de reflow da W3C, com critérios e exceções .

Reproduza e diagnostique overflow horizontal

Basta adicionar a seguinte declaração na parte inferior do seu CSS original e abri-lo em 390px. O primeiro cartão requer pelo menos 40rem, então ele não caberá na tela. Selecione o cartão usando a seleção de elemento nas ferramentas de desenvolvedor e verifique a largura calculada e a largura mínima.

.card:first-child { min-width: 40rem; }

Esse problema pode não ser resolvido apenas tornando as colunas do Grid menores. Isso acontece porque o próprio item requer uma largura mínima. Se você remover a declaração que adicionou, ele retornará ao min-width: 0 original. Verifique novamente a rolagem horizontal e a exibição do cartão na mesma largura de tela.

Após restaurar, desta vez apenas adicione a seguinte declaração: Verifique onde identificadores longos ultrapassam o limite e remova a declaração adicionada para restaurar overflow-wrap: anywhere. Colocar dois problemas de uma vez dificulta saber qual mudança resolveu. A diferença entre largura mínima fixa e tratamento de textos longos é explicada em Overflow, quebra de texto longo e reticências.

.card { overflow-wrap: normal; }

Você pode verificar rapidamente se toda a página está extrapolando com os valores abaixo no console. Se o número à direita for maior que o da esquerda, é um sinal para investigar a causa. Essa verificação compara apenas a largura do documento e não indica imediatamente qual elemento está causando; a área de rolagem horizontal pretendida e os elementos ocultos também devem ser determinados separadamente.

({ viewport: window.innerWidth, document: document.documentElement.scrollWidth })

Encontre conteúdo cortado por alturas fixas

Com o original sem problemas de largura, apenas adicione o seguinte código na parte inferior: Observe que a descrição ou link na parte inferior do primeiro cartão está cortado. A combinação de altura fixa e ocultação é particularmente problemática porque textos ampliados ou descrições longas aumentam a altura necessária.

.card:first-child { height: 10rem; overflow: hidden; }

Remova a declaração que você adicionou para voltar à altura automática baseada no conteúdo. Mesmo que o objetivo de design seja corresponder à altura de cartões curtos, evite truncar informações. Revise alternativas, como definir uma altura mínima para permitir espaço vazio ou ajustar as condições de posicionamento, e verifique novamente para sentenças longas e condições de ampliação. Ocultar a rolagem horizontal ou reduzir continuamente o tamanho da fonte para disfarçar o problema não é a primeira escolha pelo mesmo motivo.

Verifique a navegação pelo teclado e registre os resultados

Após abrir uma nova página, use Tab para mover pelo menu, link do cartão, campo de e-mail e botões em ordem. Volte com Shift+Tab e certifique-se de que a borda de foco esteja visível. Certifique-se de que a navegação para elementos fora da tela role adequadamente e de que nenhum menu fixo ou outros elementos bloqueiem completamente o foco. Se você alterar a ordem visual usando CSS, certifique-se de que não conflite com a ordem de leitura/teclado do HTML.

Esta tabela é um exemplo de como registrar e os resultados reais da inspeção são verificados e preenchidos em cada ambiente. Mesmo ao registrar que não houve problemas, você deve deixar registradas as condições que foram implementadas para que possa compará-las com alterações subsequentes. Ao verificar separadamente a largura, o aumento, o conteúdo e o funcionamento do teclado e retestar as condições de falha originais após a correção, você pode reduzir problemas que são fáceis de perder ao olhar apenas para uma tela.