Curso de CSS / comprobar el diseño adaptable: anchura, zoom y teclado

El CSS responsivo debe seguir siendo usable en diferentes anchos de vista, niveles de zoom y condiciones de entrada. Verifica contenido recortado, desplazamiento inesperado de la página, controles ocultos y foco de teclado invisible en lugar de depender solo de una vista previa del tamaño de un teléfono.

Prepara una página para comprobaciones responsivas

El dimensionamiento fluido, la consulta de medios y la proporción de imagen aprendidos en la lección anterior se recopilan en una sola página. Si guardas el siguiente código como responsive-check.html, puedes ver menús, tarjetas, imágenes, cadenas largas y formularios de entrada juntos. La imagen está contenida dentro del archivo y no se requiere ninguna biblioteca o servidor separado.

<!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 se creó inicialmente para no tener desbordamiento horizontal. En ejercicios posteriores, encontraremos la causa agregando y eliminando el CSS que crea el error uno por uno. Si copias el archivo original y lo dejas como responsive-check-original.html, es fácil revertirlo si cambias varias propiedades por error. El envío del formulario es un ejemplo que no se envía a un servidor de almacenamiento y utiliza la dirección de prueba sugerida en lugar de información personal real.

Recorre las anchuras y comprueba los límites de cambio

En Edge, abre DevTools, habilita la emulación de dispositivos e ingresa un ancho en el modo Responsive. Los atajos predeterminados de Windows son F12 o Ctrl+Shift+I para DevTools y Ctrl+Shift+M para la emulación de dispositivos. Las etiquetas y posiciones de la barra de herramientas pueden variar según la versión; consulta la guía de emulación de dispositivos de Microsoft Edge. Compara las anchuras justo antes y después de cada umbral descrito en consultas de medios CSS y puntos de cambio según el contenido.

1. A 320px y 390px, verifica si el menú se extiende a múltiples líneas y si la imagen y el cuadro de entrada caben dentro del texto. Desplázate hasta el final y busca truncamiento de texto y desplazamiento horizontal en toda la página.
2. Aumenta lentamente el ancho y comprueba las áreas donde las tarjetas son demasiado estrechas o hay espacio innecesario entre los menús. Recorre también los tamaños intermedios, además de los dispositivos predefinidos.
3. Este ejemplo cambia en 42rem. Con un tamaño de fuente inicial de 16px, compara 671px, 672px y 673px: 671px debería tener una columna de tarjetas, mientras que 672px y 673px deberían tener dos.
4. En pantallas más amplias como 1365px y 1920px, comprueba si se mantiene el ancho máximo de texto y si las líneas no son demasiado largas. Aparte de la emulación de dispositivos, comprueba el funcionamiento, el teclado virtual y la rotación de pantalla en el dispositivo real que se está utilizando.

La emulación de dispositivos es una herramienta de aproximación que cambia el ancho y algunas condiciones. No replica todas las fuentes, controles táctiles, teclado virtual y el comportamiento del navegador de un dispositivo real. Comprueba también la situación de entrada donde el teclado virtual aparece en la parte inferior de la pantalla en el dispositivo real.

Separa el zoom del navegador de los cambios de tamaño de texto

A medida que el zoom del navegador aumenta toda la página, el ancho de la ventana gráfica que CSS puede usar también puede cambiar. Acerca con Ctrl y + en Windows, y vuelve a la magnificación predeterminada con Ctrl+0. Configurar el tamaño de fuente o agrandar solo la fuente es una condición para verificar por separado la relación entre el texto y el recuadro. Los experimentos cambiando el tamaño de fuente de HTML en CSS no deben registrarse como zoom del navegador.

1. Registra el ancho de la pantalla en la escala predeterminada en la ventana del navegador real y escálalo al 200%. Verifica que el texto del menú, la descripción de la tarjeta, la etiqueta, el cuadro de entrada y el botón no esté cortado ni se superponga.
2. Comprueba que el contenido sea legible a aumentos mayores. Cuando se amplía al 400 % basado en el ancho de 1280 px CSS, el espacio es equivalente a aproximadamente 320 px CSS, pero el valor real puede variar dependiendo de la interfaz del navegador, la barra de desplazamiento, etc.
3. Restablece la escala predeterminada y comprueba de nuevo cambiando significativamente la configuración de fuente del navegador. Las condiciones y los resultados de cambiar la fuente predeterminada, ampliar la página y modificar CSS se registran como elementos separados.

Las verificaciones de accesibilidad incluyen mantener el contenido y la funcionalidad al redimensionar el texto al 200 % y reorganizar el contenido normal de desplazamiento vertical dentro del equivalente a 320 píxeles CSS sin desplazamiento bidireccional. Contenido como una tabla de datos o un mapa puede tener una excepción justificada bidimensional, pero esa excepción no se aplica automáticamente a toda la página. Para más detalles, consulta Explicación del ajuste de tamaño de fuente de W3C, la explicación de redistribución del contenido y sus excepciones .

Reproduce y diagnostica el desbordamiento horizontal

Solo agrega la siguiente declaración al final de tu CSS original y ábrelo a 390px. La primera tarjeta requiere al menos 40rem, por lo que no cabrá dentro de la pantalla. Selecciona la tarjeta usando la selección de elementos en las herramientas de desarrollo y verifica el ancho calculado y el ancho mínimo.

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

Este problema puede no resolverse solo haciendo que las columnas de la cuadrícula sean más pequeñas. Esto se debe a que el propio elemento requiere un ancho mínimo. Si eliminas la declaración que agregaste, volverá al min-width: 0 original. Verifica nuevamente el desplazamiento horizontal y la visualización de las tarjetas con la misma anchura de pantalla.

Después de restaurar, esta vez solo agrega la siguiente declaración: verifica dónde los identificadores largos se desbordan y elimina las declaraciones extra para restaurar el valor anywhere. Poner dos problemas a la vez dificulta saber qué cambio lo resolvió. La diferencia entre el tamaño mínimo y el ajuste de cadenas largas se explica en overflow, saltos de texto y puntos suspensivos con CSS.

.card { overflow-wrap: normal; }

Puedes verificar rápidamente si toda la página se está desbordando con los valores a continuación en la consola. Si el número a la derecha es mayor que el de la izquierda, es una señal para investigar la causa. Esta comprobación solo compara el ancho del documento y no indica de inmediato qué elemento lo está causando; el área de desplazamiento horizontal prevista y los elementos ocultos también deben determinarse por separado.

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

Encuentra contenido recortado por alturas fijas

Con el original sin ningún problema de ancho, solo agrega el siguiente código al final: Observa que la descripción o el enlace en la parte inferior de la primera tarjeta está cortado. La combinación de altura fija y ocultamiento es particularmente problemática porque el texto ampliado o las descripciones largas aumentan la altura requerida.

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

Elimina la declaración que agregaste para volver a la altura automática basada en el contenido. Incluso si el objetivo de diseño es igualar la altura de las tarjetas cortas, evita truncar la información. Revisa alternativas como establecer una altura mínima para permitir espacio vacío o ajustar las condiciones de colocación, y verifica nuevamente las oraciones largas y las condiciones de ampliación. Ocultar el desplazamiento horizontal o reducir continuamente el tamaño de la fuente para enmascarar el problema no es la primera opción por la misma razón.

Revisa la navegación con el teclado y registra los resultados

Después de abrir una nueva página, usa Tab para moverte al menú, al enlace de la tarjeta, al campo de entrada de correo electrónico y a los botones en orden. Retrocede con Shift+Tab y comprueba que el contorno de foco sea visible. Comprueba que la navegación hacia elementos fuera de la pantalla se desplace adecuadamente y que ningún menú fijo u otros elementos oculten por completo el elemento enfocado. Si cambias el orden visual usando CSS, comprueba que no entre en conflicto con el orden de lectura/teclado del HTML.

Esta tabla es un ejemplo de cómo registrar y los resultados reales de la inspección se verifican y se completan en cada entorno. Incluso al registrar que no hubo problemas, debes dejar las condiciones que se implementaron para poder compararlas con los cambios posteriores. Al verificar por separado el ancho, la ampliación, el contenido y la operación del teclado y volver a probar las condiciones de fallo originales después de la corrección, puedes reducir los problemas que son fáciles de pasar por alto mirando solo una pantalla.