Una bisagra puede cambiar la página, no solo el hardware
La bisagra de un dispositivo puede cambiar una página web, no solo el hardware. La media feature de CSS device-posture ofrece una forma poderosa de adaptar el contenido web. Distingue entre una pantalla continuous, como una tableta plana, y una postura folded, lo que permite que los estilos respondan directamente al estado físico del dispositivo.
Un video reciente de Better Stack demostró esto al mostrar una página que cambiaba de "plana" a "plegada" cuando se doblaba un hipotético dispositivo plegable de Apple. Aunque el video hace referencia a un "teléfono plegable de $2,000" o un "iPhone Surface Duo", Apple no ha anunciado tal producto; estos son ejemplos especulativos para ilustrar la tecnología.
Esta capacidad, también disponible a través de una API de JavaScript, no es solo para presumir. El objetivo es el diseño con propósito. Por ejemplo, un reproductor de video podría mostrarse en pantalla completa cuando el dispositivo está en modo continuous y luego adaptarse automáticamente para mostrar el video en un segmento y los detalles del capítulo o comentarios en el otro cuando está folded.
Google Chrome ya admite estas funciones, y Samsung Internet ha ofrecido capacidades similares durante años para dispositivos como el Galaxy Z Fold. Safari ha implementado las API en un simulador de "iPhone Surface Duo", aunque permanecen detrás de un feature flag, lo que indica un desarrollo temprano en lugar de una disponibilidad general. Firefox aún no admite estas funciones.
Deja que JavaScript reaccione cuando el dispositivo se dobla
Al igual que CSS se adapta al estado físico de un dispositivo, JavaScript ofrece una contraparte poderosa: la Device Posture API. Puedes acceder a la postura actual a través de navigator.devicePosture y, lo que es más importante, escuchar los cambios mediante su evento change. Este evento se dispara cada vez que el dispositivo transiciona entre estados como continuous (plano) y folded (plegado), permitiendo que tu aplicación web reaccione dinámicamente.
¡Imagina algo más que un simple contador de pliegues! Con esta API, puedes implementar comportamientos realmente útiles. Un reproductor de video podría pausar la reproducción automáticamente cuando el dispositivo se pliega, evitando saltos accidentales, o un editor de texto podría guardar ediciones no guardadas. Para tareas de varios pasos, un pliegue podría activar una transición al siguiente paso, asegurando que el contexto del usuario permanezca intacto.
Recuerda, la postura es una señal, no una instrucción para el usuario. Evita sorprender a los usuarios alterando drásticamente la funcionalidad principal o haciendo que las acciones sean más difíciles de alcanzar solo porque el dispositivo se dobló. En su lugar, utiliza estas señales para mejorar la experiencia, asegurando que las acciones principales sigan siendo intuitivas y accesibles independientemente de si la pantalla está plana o plegada. Google Chrome y Samsung Internet ya admiten estas funciones, ofreciendo herramientas robustas para crear interfaces adaptables.
Convierte el pliegue en un límite de diseño
Las bisagras físicas en los dispositivos plegables no son solo características de hardware; pueden dividir una sola pantalla en múltiples viewport segments. Esto significa que una pantalla plegada puede exponer regiones lógicas separadas, permitiendo a los desarrolladores asignar contenido complementario a cada lado. En lugar de colocar torpemente controles clave o contenido directamente sobre un pliegue, puedes diseñar paneles distintos.
Considera un reproductor de video: cuando el dispositivo está plano, puede llenar toda la pantalla. Pero cuando está plegado, podrías mantener la reproducción de video en un segmento y mostrar capítulos, descripciones o comentarios en el otro. Esto crea una experiencia de usuario más intuitiva y eficiente, aprovechando al máximo el factor de forma único.
CSS ofrece segment media features como horizontal-viewport-segments y vertical-viewport-segments para detectar y aplicar estilos a estas regiones individuales. Puedes dimensionar elementos con precisión usando variables de entorno como env(viewport-segment-width 0 0) o env(viewport-segment-height 0 0) dentro de expresiones calc(). Esto ayuda a evitar colocar elementos críticos de la interfaz directamente sobre la bisagra física.
Aunque estas herramientas son potentes, asegúrate siempre de que tus diseños se degraden correctamente en pantallas tradicionales y continuas. Google Google Chrome y Samsung Internet han soportado estas funciones durante años, y WebKit también está progresando detrás de flags. Para obtener detalles técnicos más profundos, explora la especificación Device Posture API - W3C.
¿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
Construye para los navegadores de hoy, no para un iPhone rumoreado
Entonces, ¿dónde puedes usar realmente estas ingeniosas funciones para plegables hoy en día? Google Google Chrome y Samsung Internet lideran el grupo, ofreciendo un soporte sólido para device-posture y los segmentos de viewport. Samsung Internet fue pionero en estas funciones hace años para sus dispositivos Galaxy Z Fold y Flip, mientras que Google Google Chrome las promovió recientemente desde pruebas de origen a soporte base.
Firefox, desafortunadamente, no soporta actualmente estas API. Safari y WebKit han mostrado algo de trabajo experimental dentro de un simulador específico de "iPhone Surface Duo", pero estas funciones permanecen detrás de un flag, no disponibles de forma general. Consulta siempre las MDN references actuales y las tablas de compatibilidad de navegadores, ya que el soporte evoluciona rápidamente con cada nueva versión del navegador.
Cuando construyas para dispositivos plegables, adopta la progressive enhancement. Primero, detecta si navigator.devicePosture existe antes de intentar usarlo. Segundo, diseña un diseño base útil que funcione bien en todas las pantallas continuas, y luego añade estilos específicos para plegables.
Prueba siempre tu interfaz a través de las transiciones de postura. Nunca hagas que el contenido o la funcionalidad esencial dependan únicamente de un estado plegado; asegura una experiencia fluida, ya sea que el dispositivo esté plano o doblado. Tus usuarios te agradecerán por el diseño reflexivo.
Preguntas frecuentes
¿Qué hace la media query CSS device-posture?
Permite que una página web aplique estilos basados en la postura física de un dispositivo, como si una pantalla plegable está doblada o es continua.
¿Cómo ayudan los segmentos de viewport con las pantallas plegables?
Exponen las regiones distintas de una pantalla segmentada para que una página pueda colocar contenido a cada lado de una bisagra o pliegue.
¿Puede JavaScript detectar cuándo un teléfono plegable cambia de postura?
Sí. La Device Posture API expone la postura actual y un evento de cambio que permite a la página responder cuando esta cambia.
¿Soportan todos los navegadores las API web para dispositivos plegables?
No. El soporte varía: los navegadores basados en Chromium y Samsung Internet ofrecen capacidades, mientras que Firefox carece de implementación y el soporte de Safari ha sido experimental.
¿Ha lanzado Apple un iPhone plegable?
No se ha anunciado ningún iPhone plegable. El video discute un dispositivo hipotético e informa sobre trabajos experimentales de Safari, no un producto confirmado de Apple.