El Samsung Galaxy Z Fold y el Google Pixel Fold ya no son un nicho: cada vez más usuarios navegan con una pantalla que cambia de tamaño y proporción según esté plegada o desplegada. Si tu web solo se ha probado en móvil y escritorio, es muy probable que en un plegable se vea rota, con elementos cortados justo en la bisagra o espacios en blanco donde no debería haberlos. Preparar tu sitio para este tipo de dispositivos ya no es un capricho técnico, así que vamos a ver qué hay que tocar.
1. Entender qué cambia con un plegable
Un plegable cambia de tamaño y relación de aspecto según su estado, algo que ningún otro dispositivo hace en tiempo real. Eso significa que tu web puede pasar de una pantalla de 6 pulgadas en formato vertical a una de 8 pulgadas casi cuadrada sin que el usuario recargue la página. Un diseño que solo contempla «móvil» y «escritorio» se queda corto: hace falta pensar en ese estado intermedio.
2. Ir más allá del responsive estándar
El diseño responsive de toda la vida trabaja con puntos de corte fijos, pero un plegable necesita media queries que reaccionen a la relación de aspecto real de la pantalla en cada momento, no solo al ancho en píxeles:
@media (min-width: 600px) and (max-width: 900px) {
/* Estilo para pantallas intermedias, como dispositivos plegables en modo semiabierto */
}
@media (aspect-ratio: 3/4) {
/* Estilo para dispositivos en formato vertical plegado */
}
@media (aspect-ratio: 16/9) {
/* Estilo para formato apaisado desplegado */
}
Con esto cubierto, revisa que menús, imágenes y botones se reorganicen según el espacio disponible en cada estado, no solo en los dos extremos.
3. Pensar en clave multi-pantalla
Algunos plegables tienen pantalla externa además de la interna, y el usuario puede pasar de una a otra sin previo aviso. Si eso ocurre, el contenido debe seguir cargado justo donde lo dejó, sin recargas ni saltos. La Window Segments API, ya disponible en navegadores modernos, permite detectar qué área de pantalla está activa y adaptar el contenido a ese segmento:
if (window.screenSegments) {
const segments = window.screenSegments;
console.log(segments); // Información sobre las áreas de visualización
}
4. No perder velocidad por el camino
Quien usa un plegable suele tener varias apps abiertas a la vez, así que la carga rápida pesa todavía más. Comprime imágenes, aplica lazy loading y reduce CSS y JavaScript al mínimo indispensable. Google Lighthouse y WebPageTest ayudan a localizar dónde se atasca realmente la carga, en vez de optimizar a ciegas. Si aún no has revisado tus Core Web Vitals, este es buen momento para hacerlo.
5. Gestos y áreas táctiles más generosas
En pantallas táctiles grandes los gestos ganan protagonismo, así que los botones y enlaces necesitan más separación entre sí para evitar toques accidentales. Cuida también las transiciones: una animación brusca al pasar de plegado a desplegado se nota mucho más en una pantalla de este tamaño que en un móvil convencional.
6. Probar en dispositivos reales, no solo en el emulador
Android Studio, BrowserStack y Samsung Remote Test Lab permiten simular distintos estados de plegado sin tener el terminal físico delante, y Chrome DevTools cubre las pruebas rápidas de relación de aspecto. Aun así, antes de dar por bueno un diseño conviene probarlo en un plegable real al menos una vez: hay matices de la bisagra que ningún emulador reproduce del todo.
7. APIs que facilitan el trabajo
La Window Segments API no va sola. Viewport Fit ajusta el contenido en pantallas con esquinas redondeadas o áreas recortadas:
body {
viewport-fit: cover;
}
Y la detección de orientación ajusta el diseño automáticamente según cómo sostenga el usuario el dispositivo:
if (screen.orientation.type === "landscape-primary") {
console.log("Modo apaisado");
}
8. Adaptar el contenido al estado del dispositivo
En modo plegado el usuario suele querer algo rápido y concreto, mientras que al desplegar espera más detalle y funciones. No hace falta duplicar el contenido, pero sí priorizar qué se muestra primero según el espacio disponible.
9. Aprovechar el espacio extra sin saturar
Con la pantalla desplegada hay sitio de sobra para columnas múltiples, paneles laterales o elementos interactivos que en móvil no cabían. Aun así, más espacio no significa meter más cosas: la claridad sigue ganando a la densidad.
Preguntas frecuentes
¿Necesito un diseño distinto para plegables o basta con el responsive normal?
El responsive normal cubre lo básico, pero no reacciona a cambios de relación de aspecto en tiempo real. Necesitas media queries adicionales basadas en aspect-ratio, además de las habituales por ancho de pantalla, para que la transición entre estados no rompa el diseño.
¿Qué es la Window Segments API?
Es una API de navegador que permite detectar cuántas áreas de pantalla activa tiene un dispositivo plegable y ajustar el contenido a cada segmento, algo útil sobre todo cuando el usuario usa la pantalla externa e interna de forma independiente.
¿Cómo pruebo mi web en un plegable sin tener el dispositivo?
BrowserStack y Samsung Remote Test Lab dan acceso remoto a dispositivos plegables reales, y Chrome DevTools permite emular relaciones de aspecto concretas para pruebas rápidas durante el desarrollo.
¿Los plegables afectan al SEO de mi web?
No directamente, pero un diseño roto en estos dispositivos afecta a métricas de experiencia de usuario que Google sí tiene en cuenta, como el tiempo en página o la tasa de rebote. Cuidar el diseño mobile-first en general ayuda también aquí.
Los plegables seguirán evolucionando, con pantallas enrollables ya en desarrollo, así que conviene construir sobre bases sólidas: un responsive bien hecho y un enfoque mobile-first de partida, en lugar de parchear añadiendo reglas específicas cada vez que sale un dispositivo nuevo.
