Para ver una web como en un iPad en Chrome, abre DevTools, activa la barra de dispositivos (Ctrl + Shift + M, o Cmd + Shift + M en Mac) y elige un iPad en la lista Dimensions o escribe un tamaño de tablet como 820 × 1180. Una extensión de vista móvil con preajustes de tablet hace lo mismo desde un botón de la barra de herramientas. Pero antes de fiarte de lo que ves, lee el apartado sobre Safari en iPad: los iPad reales suelen cargar la versión de escritorio de las webs.
Por qué es fácil equivocarse al probar en tablet
Las tablets están en el incómodo término medio del diseño responsive. Su ancho en vertical (de unos 744 a 1032 píxeles CSS en los iPad actuales) cae justo en los breakpoints más habituales, 768 px y 1024 px. Un diseño puede pasar de «móvil» a «escritorio» al girar la tablet, y justo ahí suelen romperse las cabeceras fijas, los menús laterales y las cuadrículas de varias columnas.
Hay una segunda trampa que no tiene nada que ver con el ancho.
Safari en iPad pide la web de escritorio por defecto
Desde iPadOS 13, Safari en iPad pide por defecto la versión de escritorio de las webs. Envía un user agent parecido al de Safari en Mac, no al de un iPad. Eso significa que:
- un servidor que detecta móviles por el user agent tratará el iPad como un ordenador
- tu CSS sigue el ancho real del viewport, así que las media queries funcionan como esperas
- la entrada sigue siendo solo táctil, aunque la web crea que habla con un Mac
Así que, cuando emulas un iPad en Chrome con user agent de «iPad», puede que veas una versión de tu web que los usuarios reales de iPad nunca reciben. Para una prueba honesta, revisa las dos: el viewport del iPad con user agent móvil/iPad y el mismo viewport con user agent de escritorio. En DevTools puedes sustituir el user agent en More tools > Network conditions; los pasos están en cómo cambiar el user agent en Chrome.
Método 1: modo dispositivo de DevTools
- Abre DevTools y activa la barra de dispositivos.
- En el menú Dimensions, elige un modelo de iPad si aparece. Si no, haz clic en Edit y activa más dispositivos, o elige Responsive y escribe el tamaño.
- Gira con el icono de rotación para probar en horizontal.
- Recarga la página.
El modo dispositivo también emula eventos táctiles, lo que ayuda a probar menús de tablet que se abren con un toque. Más detalles en la guía del emulador móvil de Chrome.
Método 2: una extensión de vista móvil con preajustes de tablet
Si revisas diseños de tablet a menudo, una extensión es más rápida. Mobile View Extension incluye preajustes de tablet junto a los de móvil, admite vertical y horizontal y te deja introducir una resolución personalizada cuando tu dispositivo no está en la lista. Recarga la pestaña con el user agent y el tamaño de pantalla correspondientes y mantiene esa vista mientras navegas. Como cualquier vista previa dentro del navegador, se usa con el ratón y no con entrada táctil.
Método 3: Simulator de Xcode para el Safari real del iPad
En un Mac, el Simulator de Xcode ejecuta el iPadOS real con Safari. Muestra el comportamiento de «web de escritorio» descrito arriba, el renderizado propio de Safari y el teclado en pantalla. Es gratuito pero pesado, y solo para macOS. Mira cómo probar una web en iPhone sin iPhone; los pasos para iPad son los mismos.
Tamaños de viewport de los iPad actuales
Son tamaños de viewport CSS en vertical, obtenidos al dividir las resoluciones de pantalla publicadas por Apple entre una densidad de píxeles de 2.
| Modelo de iPad | Pantalla | Resolución física | Viewport CSS (vertical) |
|---|---|---|---|
| iPad mini (6.ª y 7.ª generación) | 8,3” | 1488 × 2266 | 744 × 1133 |
| iPad (10.ª generación y A16) | 10,9–11” | 1640 × 2360 | 820 × 1180 |
| iPad Air de 11” (M2 y posteriores) | 11” | 1640 × 2360 | 820 × 1180 |
| iPad Air de 13” (M2 y posteriores) | 13” | 2048 × 2732 | 1024 × 1366 |
| iPad Pro de 11” (M4 y posteriores) | 11” | 1668 × 2420 | 834 × 1210 |
| iPad Pro de 13” (M4 y posteriores) | 13” | 2064 × 2752 | 1032 × 1376 |
Consulta la página de especificaciones técnicas de Apple para el modelo exacto que te interese, porque Apple renueva los iPad a menudo.
Las tablets Android varían mucho más. Un conjunto útil para probar es 800 × 1280, 600 × 960 (tablets pequeñas de 7–8 pulgadas) y un tamaño ancho en horizontal como 1280 × 800.
Qué revisar a tamaño de tablet
- Navegación. ¿El menú pasa de hamburguesa a barra completa en un ancho donde la barra completa cabe de verdad?
- Cuadrículas. ¿Las cuadrículas de tarjetas de tres columnas se convierten en cuadrículas de dos columnas apretadas con elementos huérfanos?
- Interacciones solo con hover. Los desplegables que se abren con hover no hacen nada en una pantalla táctil. Asegúrate de que también se abren con un toque.
- Horizontal. Gira y vuelve a revisar: 1180 px de ancho en horizontal pueden activar tu diseño de escritorio en una pantalla de 10,9 pulgadas.
- Imágenes y vídeo. Las tablets tienen pantallas de alta densidad, así que las imágenes de baja resolución se ven borrosas.
Los breakpoints que encajan con las tablets se tratan en breakpoints responsive.
Preguntas frecuentes
¿Qué tamaño de pantalla uso para probar en iPad?
Empieza con 820 × 1180 (iPad y iPad Air de 11”) y 1024 × 1366 (modelos de 13”), en ambas orientaciones. Añade 744 × 1133 si el iPad mini importa para tu público.
¿Por qué mi web muestra la versión de escritorio en iPad?
Safari en iPad pide las webs de escritorio por defecto y envía un user agent parecido al de un Mac. Si tu web elige versión según el user agent, el iPad recibe la de escritorio. Un diseño responsive basado en el ancho de CSS evita el problema.
¿Puedo probar la vista de tablet en Chrome sin DevTools?
Sí. Una extensión de vista móvil con preajustes de tablet, como Mobile View Extension, muestra tamaños de tablet desde un botón de la barra de herramientas.