Los teléfonos plegables y los dispositivos de doble pantalla como el Surface Duo presentan un problema de diseño que el diseño responsivo ordinario no resuelve: la ventana del navegador puede abarcar dos pantallas físicamente separadas divididas por una bisagra o un pliegue. Una página diseñada para un rectángulo continuo puede terminar con el contenido dividido de forma extraña a través de la unión, o quedar oculto detrás de la bisagra.
Dos características de CSS permiten que una página detecte esa situación y se adapte. La primera es un par de consultas de medios (media queries):
@media (horizontal-viewport-segments: 2) { /* sostenido como un libro, dos pantallas una al lado de la otra */ } @media (vertical-viewport-segments: 2) { /* apiladas como una laptop, pliegue horizontal */ }
`horizontal-viewport-segments` coincide con el dispositivo cuando la bisagra es vertical y las dos pantallas están una al lado de la otra; `vertical-viewport-segments` coincide cuando la bisagra es horizontal y las pantallas están apiladas. El número entero informa cuántos segmentos de vista existen en esa dirección, por lo que una página puede dirigirse exactamente a la postura de dos pantallas.
El artículo presenta seis variables de entorno CSS —viewport-segment-width, height, top, left, bottom, right— que permiten que un diseño se adapte a las dimensiones específicas de bisagra y pantalla de cada modelo plegable sin puntos de interrupción codificados manualmente.
La segunda característica es un conjunto de variables de entorno CSS que informan la geometría de cada segmento de pantalla:
env(viewport-segment-width 0 0); env(viewport-segment-height 0 0); env(viewport-segment-top 0 0); env(viewport-segment-left 0 0); env(viewport-segment-bottom 0 0); env(viewport-segment-right 0 0);
Las dos coordenadas abordan una cuadrícula creada por las características de hardware que separan los segmentos, con el 0,0 en el segmento superior izquierdo. Debido a que estos valores son calculados por el dispositivo, un diseño se adapta a las dimensiones específicas de pantalla y bisagra de cada modelo sin que el diseñador tenga que escribir un punto de interrupción (breakpoint) separado para cada dispositivo.
Stimac demuestra este enfoque en una página de recetas que se convierte en una cuadrícula de dos columnas en un dispositivo de doble pantalla:
@media (horizontal-viewport-segments: 2) { .container { grid-template-columns: env(viewport-segment-width 0 0), 1fr; } }
La primera columna de la cuadrícula llena la pantalla izquierda mientras que la segunda ocupa el espacio restante a la derecha. La misma regla puede escribirse de forma más explícita nombrando ambos anchos de segmento, de modo que cada columna se mapee a una pantalla.
Las variables de entorno también permiten que una página posicione el contenido deliberadamente a través de las dos pantallas en lugar de dejar que caiga sobre la bisagra. En la versión de Smashing Magazine de este trabajo, Stimac explica un diseño donde una versión temprana dejaba el texto oculto por el propio dispositivo; al restablecer los márgenes y el relleno (padding), y luego volver a aplicarlos por segmento, se produjo un diseño dividido en el que ningún contenido queda oculto.
Una preocupación relacionada es si los elementos interactivos quedan en la unión. La geometría del segmento es medible, por lo que un diseñador puede mantener los botones y los objetivos de pulsación fuera de la zona de la bisagra en lugar de confiar en la suerte; la cuestión es de posicionamiento deliberado, no un problema de hardware resuelto.
JavaScript ofrece una vía paralela a través de la API Visual Viewport. Consultar `window.visualViewport.segments` devuelve un array de DOMRects para cada segmento, o `null` en un diseño de pantalla única, un diseño deliberado que evita que el código apunte accidentalmente a dispositivos de una sola pantalla. Los valores devueltos son una instantánea inmutable, por lo que después de un cambio de tamaño o rotación, la página debe volver a consultar los segmentos para obtener el estado actual.
La pregunta práctica que plantea la publicación no es solo cómo construir estos diseños, sino si se debe hacer. Stimac reconoce el escepticismo: muchos desarrolladores ven el esfuerzo como una estrategia dirigida a una pequeña fracción de usuarios. Su contraargumento se basa en un pronóstico de más de 21 millones de dispositivos plegables enviados en 2023. Esa cifra es pequeña comparada con el mercado móvil general, pero sigue siendo millones de dispositivos en uso y, según argumenta, la llegada del Pixel Fold de Google señala que este factor de forma es persistente en lugar de experimental.
Su segundo argumento es la diferenciación: un sitio que se adapta a un dispositivo plegable hace algo que los diseños responsivos estándar de sus competidores no hacen. Aconseja utilizar datos sobre qué dispositivos tienen realmente los clientes antes de comprometer tiempo de ingeniería, y señala que el navegador en un panel de pantalla del Surface Duo ya renderiza un sitio responsivo normal, por lo que un modo de doble pantalla es una mejora, no un requisito.
El soporte del navegador es el principal obstáculo. Tanto las consultas de medios como las variables de entorno son compatibles en Microsoft Edge Stable. Chrome Stable aún no las incluye, lo que la publicación califica como una brecha significativa dado que el Pixel Fold se envía con Chrome. Las pruebas son posibles habilitando una bandera experimental en `chrome://flags` y utilizando el emulador de Surface Duo.
La publicación concluye señalando que, sin el soporte del navegador y del sistema operativo, es poco probable que las empresas inviertan en experiencias para dispositivos plegables, por lo que el trabajo de habilitación debe ocurrir primero en los navegadores. Para los lectores que quieran profundizar, el tratamiento más extenso de Stimac sobre la misma demostración de recetas aparece en Smashing Magazine, y ella recomienda descargar Edge para experimentar.
Lo que establece esta publicación es limitado en un aspecto importante: es un estudio de cómo hacerlo y un punto de vista, no una validación independiente de cualquiera de estas técnicas. La pieza de Smashing Magazine está escrita por la misma autora, por lo que refleja su propia posición declarada en lugar de una corroboración externa. Lo que no se proporciona son datos de rendimiento en el mundo real, cifras de adopción de cualquier editor o cualquier evaluación formal de si los diseños específicos para dispositivos plegables mejoran los resultados medibles para los usuarios.