Chrome está probando dos APIs, la API de Device Posture y la API de Viewport Segments enumeration, que están disponibles como una prueba de origen a partir de Chrome 125. Se conocen colectivamente como las APIs de Foldable, diseñadas para ayudar a los desarrolladores a segmentar sus anuncios para dispositivos plegables. En esta publicación, se presentan estas APIs y se proporciona información sobre cómo comenzar a probarlas.
Hay principalmente dos factores de forma físicos diferentes: dispositivos con una sola pantalla flexible (sin problemas) y dispositivos con dos pantallas (con costura, también conocidos como dispositivos con pantalla doble).
Estos dispositivos presentan desafíos y oportunidades para los desarrolladores. Proporcionan formas adicionales en las que se puede ver el contenido. Por ejemplo, un usuario puede sostener un dispositivo perfecto, como un libro, y cambiar a usarlo como una tablet con pantalla plana. Los dispositivos con dos pantallas tienen una unión física entre las pantallas que quizás debas tener en cuenta.
Estas nuevas APIs ofrecen a los desarrolladores formas de brindar mejores experiencias del usuario para estos dispositivos. Cada API expone las primitivas necesarias de la plataforma web de dos maneras: a través de CSS y JavaScript.
API de Device Posture
Los dispositivos plegables tienen capacidades que les permiten cambiar su_posición_ o el estado físico del dispositivo. Pueden cambiar su factor de forma, lo que les permite a los autores de contenido ofrecer una experiencia del usuario diferente, y estas nuevas APIs garantizan que el contenido web pueda reaccionar a los diferentes estados de plegado.
Existen dos posiciones en las que puede estar un dispositivo:
folded: Posturas de laptop o libro.
continuous: Pantallas planas, para tablets o incluso con curvas perfectas.
CSS
La especificación de la API de Device Posture define una nueva función multimedia de CSS: device-posture. Esta función multimedia se resuelve en un conjunto de posiciones fijas. Estas posturas constan de una serie de valores predefinidos que abarcan un estado físico del dispositivo.
Los valores del atributo device-posture coinciden con la descripción anterior de las posiciones posibles:
foldedcontinuous
Podrían agregarse nuevas posturas en el futuro si se lanzan nuevos dispositivos al mercado.
Ejemplos:
/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }
/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }
JavaScript
Para consultar la posición de un dispositivo, hay un nuevo objeto DevicePosture disponible.
const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);
Para reaccionar a los cambios de posición del dispositivo, como cuando un usuario abre por completo un dispositivo y, por lo tanto, pasa de folded a continuous, suscríbete a los eventos change.
navigator.devicePosture.addEventListener('change', (e) => {
console.log(`The device posture changed to type ${e.type}`);
});
API de Viewport Segments
Los segmentos del viewport son variables de entorno de CSS que definen la posición y las dimensiones de una región del viewport separada de forma lógica. Los segmentos de viewport se crean cuando este se divide por una o más funciones de hardware (como un pliegue o una bisagra entre pantallas separadas) que actúan como divisor. Los segmentos son las regiones del viewport que el autor puede tratar como distintas lógicamente.
CSS
La cantidad de divisiones lógicas se expone a través de dos atributos multimedia nuevos, definidos en la especificación del nivel 5 de consultas de medios de CSS: vertical-viewport-segments y horizontal-viewport-segments. Se resuelven en la cantidad de segmentos en los que se divide el viewport.
Además, se agregaron nuevas variables de entorno para consultar las dimensiones de cada división lógica. Estas variables son las siguientes:
env(viewport-segment-width x y)env(viewport-segment-height x y)env(viewport-segment-top x y)env(viewport-segment-left x y)env(viewport-segment-bottom x y)env(viewport-segment-right x y)
Cada variable tiene dos dimensiones, que representan la posición x e y, respectivamente, en la cuadrícula bidimensional creada por las funciones de hardware que separan los segmentos.
El siguiente fragmento de código es un ejemplo simplificado de creación de una UX dividida en la que tenemos dos secciones de contenido (col1 y col2) en cada lado del pliegue.
<style>
/* Segments are laid out horizontally. */
@media (horizontal-viewport-segments: 2) {
#segment-css-container {
flex-direction: row;
}
#col1 {
display: flex;
flex: 0 0 env(viewport-segment-right 0 0);
background-color: steelblue;
}
#fold {
width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
background-color: black;
height: 100%;
}
#col2 {
display: flex;
background-color: green;
}
}
/* Segments are laid out vertically. */
@media (vertical-viewport-segments: 2) {
#segment-css-container {
flex-direction: column;
}
#col1 {
display: flex;
flex: 0 0 env(viewport-segment-bottom 0 0);
background-color: pink;
}
#fold {
width: 100%;
height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
background-color: black;
}
#col2 {
display: flex;
background-color: seagreen;
}
}
</style>
<div id="segment-css-container">
<div id="col1"></div>
<div id="fold"></div>
<div id="col2"></div>
</div>
En las siguientes fotos, se muestra cómo se ve la experiencia en un dispositivo físico.
JavaScript
Para obtener la cantidad de segmentos del viewport, verifica la entrada segments en visualViewport.
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
Cada entrada del array segments representa cada segmento lógico del viewport con un DOMArray que describe las coordenadas y el tamaño. El campo segments es una instantánea del estado determinado cuando se realiza una consulta. Para recibir valores actualizados, debes escuchar los cambios de posición o los eventos de cambio de tamaño y volver a consultar la propiedad segments.
Prueba las APIs de Foldable
Las APIs de Foldable están disponibles en una prueba de origen de Chrome 125 a Chrome 128. Consulta Comienza a usar las pruebas de origen para obtener información general al respecto.
Para realizar pruebas locales, las APIs de Foldable se pueden habilitar con la marca de funciones de la plataforma web experimental en chrome://flags/#enable-experimental-web-platform-features. También se puede habilitar ejecutando Chrome desde la línea de comandos con --enable-experimental-web-platform-features.
Demostraciones
Para ver las demostraciones, consulta el repositorio de demostraciones. Si no tienes un dispositivo físico para realizar la prueba, puedes elegir el dispositivo emulado Galaxy Z Fold 5 o Asus Zenbook Fold en las Herramientas para desarrolladores de Chrome, y cambiar entre Continuo y Plegado. También puedes visualizar la bisagra cuando corresponda.
Vínculos relacionados
- API de Device Posture
- API de Viewport Segments