El CSS que ya permite diseñar para pantallas plegables
Designing for Dual Screen and Foldable Devices with CSS (2023)
Con la llegada del Pixel Fold, la autora repasa las herramientas CSS disponibles para adaptar experiencias a dispositivos de doble pantalla. Explica las media queries horizontal-viewport-segments y vertical-viewport-segments, y las variables de entorno que calculan la geometría de cada segmento. Muestra un ejemplo con CSS Grid que divide el contenido en dos columnas según las pantallas. Aunque Edge ya lo soporta, Chrome no, lo que frena la adopción. Con más de 21 millones de plegables previstos para 2023, adaptarse puede marcar la diferencia.
Las variables de entorno son geniales porque calculan las dimensiones según el dispositivo y hacen los ajustes por ti, lo que significa que no tienes que crear diseños para cada dispositivo único que exista.
- socalgal2
No estoy seguro de estar convencido.
Si dividir la interfaz es útil, entonces parece que deberías dejarme elegir dividirla incluso en una sola pantalla en lugar de decidir por mí. Mi portátil tiene una relación de aspecto similar a la de un teléfono plegable desplegado, así que si dividir cada mitad de la pantalla en dos paneles es útil, debería ser útil independientemente del dispositivo.
Personalmente, si comprara un teléfono plegable, probablemente lo haría específicamente porque quiero una pantalla más grande para el contenido existente. No quiero que tu aplicación decida por mí, que lo trate como 2 pantallas. Imagina que en vi o emacs se dividieran automáticamente los paneles según tu relación de aspecto como se muestra en el artículo. ¡No, por favor! Déjame elegir cuándo quiero dividirlo.
- ChiperSoft
Y, por supuesto, Safari todavía no soporta esto en las versiones preliminares.
- DarmokTanagra
La experiencia de usuario de la pantalla Duo de Apple asume que todo el planeta es diestro.
El nuevo Duo exhibe los mismos descuidos de UX a escala del Apple Mouse.