Los plegables se han vuelto convencionales
El reciente anuncio de Apple del iPhone Duo, con un precio de $1,999, marca un momento crucial para el desarrollo web. Con fecha de lanzamiento el 23 de octubre de 2026, este dispositivo, que cuenta con una pantalla exterior de 5.4 pulgadas y una interior de 7.6 pulgadas, catapulta a los teléfonos plegables de ser una curiosidad de nicho a una realidad convencional para todos los desarrolladores web. Ignorar estos factores de forma adaptables ya no es una opción.
Afortunadamente, los ingenieros de navegadores anticiparon este cambio. Ahora contamos con una potente media query de CSS, @media (device-posture: folded), diseñada específicamente para estos dispositivos. Esta consulta detecta si un dispositivo se encuentra en un estado folded (plegado), como un libro o una computadora portátil en miniatura, en lugar de su postura plana continuous. Permite a los desarrolladores aplicar estilos específicos para obtener experiencias de usuario óptimas en diversas configuraciones físicas.
Imagina una entrada de blog. En una pantalla plana y continuous, un diseño de una sola columna funciona perfectamente, maximizando la legibilidad. Sin embargo, cuando el usuario pliega su iPhone Duo en una posición similar a un libro, esa columna única podría resultar incómoda de leer a través del pliegue. Con device-posture, puedes cambiar fácilmente a un diseño de dos columnas, colocando el contenido elegantemente en cada segmento de la pantalla, mejorando instantáneamente la usabilidad y la interacción.
Esta sencilla adaptación demuestra el poder inmediato de la media query device-posture. Los desarrolladores ahora pueden crear diseños responsivos que se ajustan fluidamente no solo al tamaño de la pantalla, sino al modelo de interacción física del propio dispositivo. Chrome ya admite estas funciones, y el simulador del iPhone Duo de Safari las incluye, aunque bajo una bandera (flag), lo que indica su inminente disponibilidad generalizada.
Haciendo que tu sitio sea consciente del plegado
Más allá de las reglas CSS estáticas, las experiencias web para dispositivos plegables realmente brillan con interacciones dinámicas. La Device Posture API para JavaScript permite que tu sitio responda a cómo un usuario sostiene su iPhone Duo u otro plegable, proporcionando una experiencia más rica e intuitiva. Va más allá de simplemente aplicar estilos para estados planos o plegados, permitiendo reacciones en tiempo real.
Tu aplicación puede escuchar un evento change en la postura del dispositivo, activando acciones cada vez que el estado del teléfono cambia entre continuous (plano) y folded (plegado). Esto significa que puedes pausar automáticamente un video cuando un usuario comienza a cerrar su teléfono, o guardar el progreso de un formulario instantáneamente a medida que cambia de postura. Imagina una aplicación de recetas que muestra los ingredientes en una pantalla y las instrucciones en la otra, dividiendo el contenido dinámicamente a medida que el dispositivo se pliega.
Detectar estos cambios de estado de plegado con JavaScript es sencillo. Aquí tienes un fragmento fundamental:
if ('ondeviceposturechange' in window) { window.addEventListener('deviceposturechange', (event) => { const currentPosture = event.target.devicePosture.type; console.log(`La postura del dispositivo cambió a: ${currentPosture}`); // Implementa acciones dinámicas aquí basadas en currentPosture ('continuous' o 'folded') });
}Este detector de eventos proporciona el devicePosture.type, permitiéndote construir experiencias web plegables más interactivas e intuitivas. Chrome y Samsung Internet ya admiten completamente esta API, mientras que el simulador del iPhone Duo de Safari la incluye bajo una bandera de función, lo que indica un soporte futuro para el dispositivo de $1,999 de Apple.
Diseñando para dos pantallas a la vez
Los dispositivos plegables introducen un concepto fascinante: viewport segments. Cuando un iPhone Duo está plegado, presenta dos regiones de pantalla distintas, cada una controlable de forma independiente. Esto va más allá de simplemente reaccionar a un pliegue; puedes diseñar experiencias genuinas de doble pantalla, tratando cada segmento como su propio lienzo.
Para colocar el contenido con precisión, los desarrolladores utilizan variables de entorno de CSS. Por ejemplo, env(viewport-segment-width) y env(viewport-segment-height) proporcionan las dimensiones de cada segmento individual. Esto te permite crear diseños potentes y adaptables, asegurando que los elementos se alineen perfectamente alrededor de la bisagra o el espacio físico.
Considera casos de uso avanzados que realmente brillan con pantallas dobles. Un reproductor de video podría ocupar un segmento, mientras que su transcripción, capítulos o comentarios relacionados se muestran de forma interactiva en el otro. Del mismo modo, un cliente de correo electrónico podría mostrar tu lista de bandeja de entrada en un segmento y el contenido completo del mensaje seleccionado simultáneamente en el adyacente, aumentando la productividad.
Chrome ya admite estas funciones, con la API Viewport Segments disponible desde Chrome 138. Samsung Internet ha ofrecido esta funcionalidad durante años en sus teléfonos plegables. Si bien el simulador de iPhone Duo de Safari, lanzado con Xcode 27.1, incluye estas API detrás de una bandera de función (feature flag), puedes explorar funciones CSS relacionadas, como device-posture, más a fondo en device-posture CSS media feature - MDN Web Docs.
¿Te está gustando? Recibe uno así en tu bandeja cada mañana.
un correo al día · date de baja en dos clics · sin rastreadores de terceros
El campo de batalla de los navegadores: ¿Quién está listo?
Hemos explorado el "porqué" del diseño consciente de los pliegues; ahora, veamos el "dónde". Buenas noticias: ¡muchas herramientas están listas hoy! Chrome ofrece soporte estable para la media query device-posture y la API de JavaScript, incluida la API Viewport Segments disponible desde Chrome 138. Esto significa que una parte importante del mercado de plegables Android ya puede experimentar tus diseños mejorados. Samsung Internet ha defendido estas funciones durante años, garantizando una experiencia sólida para su vasta flota de dispositivos plegables.
El viaje de Safari apenas comienza. El nuevo simulador de iPhone Duo, lanzado con Xcode 27.1, incluye notablemente tanto la API device-posture como la de viewport segments. Esto señala la clara intención de Apple de admitir estas capacidades. Sin embargo, estas funciones se encuentran actualmente detrás de una bandera de función, lo que significa que, si bien Apple se está preparando para el lanzamiento del iPhone Duo de $1,999 el 23 de octubre de 2026, es posible que el soporte completo no esté habilitado para el lanzamiento.
Entonces, ¿qué debe hacer un desarrollador? ¡Adopta la mejora progresiva! Diseña tu experiencia base para que sea sólida y accesible en todos los navegadores, incluidos aquellos sin API para plegables como Firefox. Luego, incorpora las funciones avanzadas de device-posture y viewport segments como mejoras. Esta estrategia garantiza una experiencia superior y personalizada para los usuarios en dispositivos plegables capaces (como una pantalla dividida para video y notas) sin comprometer la funcionalidad para nadie más. Se trata de adaptarse con elegancia, no de romper.
Preguntas frecuentes
¿Qué es la media query CSS device-posture?
Es una nueva función de medios CSS que permite a las páginas web adaptar su diseño según el estado físico de un dispositivo. Tiene dos valores principales: continuous para una pantalla plana y folded para cuando la pantalla está doblada o articulada.
¿Cómo controlo el contenido en ambos lados de una pantalla plegada?
Puedes usar la API Viewport Segments. Las variables de entorno CSS como viewport-segment-width y viewport-segment-height te permiten dar estilo a las áreas de pantalla distintas a cada lado del pliegue, creando experiencias de doble pantalla.
¿Qué navegadores admiten actualmente las funciones CSS para plegables?
Chrome y Samsung Internet tienen soporte completo para la media query device-posture y la API Viewport Segments. El soporte en Safari está disponible en el simulador de iPhone Duo, pero actualmente se encuentra detrás de una bandera de función (feature flag). Firefox aún no cuenta con soporte.
¿Cuál es la diferencia entre la media query de CSS y la API de JavaScript para dispositivos plegables?
La media query de CSS device-posture es declarativa y se utiliza para diseñar layouts basados en el estado del dispositivo. La API JavaScript Device Posture es imperativa, lo que le permite ejecutar código en respuesta a eventos de plegado, como pausar un video o guardar datos.