El diseño web para dispositivos plegables y de doble pantalla requiere un enfoque técnico específico que va más allá de la responsividad tradicional. Con el lanzamiento de dispositivos como el Google Pixel Fold, es fundamental comprender las herramientas CSS disponibles para adaptar las interfaces a estas nuevas geometrías. Este artículo técnico detalla cómo utilizar las consultas de medios y variables de entorno para gestionar la segmentación de la pantalla.
La clave reside en el uso de las consultas de medios horizontal-viewport-segments y vertical-viewport-segments. La primera permite detectar cuando el dispositivo se sostiene como un libro, con las pantallas lado a lado, mientras que la segunda identifica la configuración tipo portátil, donde las pantallas están apiladas verticalmente. Esta distinción es crucial para aplicaciones que requieren interacción simultánea, como visualizar notas de orador en una pantalla y la presentación en la otra.
Para obtener las dimensiones exactas de cada segmento de pantalla, se emplean variables de entorno como env(viewport-segment-width) y env(viewport-segment-height). Estas variables calculan automáticamente las dimensiones basadas en la geometría del hardware, eliminando la necesidad de crear diseños específicos para cada modelo de dispositivo. Esto permite a los desarrolladores posicionar contenido de forma dinámica utilizando CSS Grid, asignando columnas o filas a las variables de entorno para que el contenido fluya correctamente entre las dos pantallas.
Aunque el mercado de dispositivos plegables representa una fracción pequeña del total de móviles, con más de 21 millones de unidades previstas para 2023, la adopción de estas tecnologías permite diferenciarse y ofrecer experiencias superiores. Sin embargo, la implementación actual presenta limitaciones de compatibilidad: estas funciones están soportadas en Microsoft Edge Stable, pero no en Chrome Stable, lo que requiere el uso de banderas experimentales para pruebas. El artículo concluye que, aunque no todos los sitios web requieren un modo de doble pantalla, los desarrolladores deben evaluar el uso de estos dispositivos por parte de su audiencia para decidir si la inversión en diseño adaptativo es viable.