Chrome está probando dos APIs, la API de Device Posture y los segmentos de Viewport API de Enumeration, que están disponibles como prueba de origen en Chrome 125. Se conocen colectivamente como las APIs de Foldable, y están diseñadas para ayudar los desarrolladores apuntan a los dispositivos plegables. En esta publicación, se presentan estas APIs y proporciona información para comenzar a probarlos.
Hay principalmente dos factores de forma físicos diferentes: dispositivos con un solo pantalla flexible (fluida) y dispositivos con dos pantallas (con costura, también conocida como 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 tener una dispositivo sin interrupciones, como un libro, y pasas a usarlo como una tablet con un pantalla plana. Los dispositivos con dos pantallas tienen una unión física entre ellas. que deben tenerse en cuenta.
Estas nuevas APIs ofrecen a los desarrolladores formas de mejorar la experiencia del usuario para estos dispositivos. Cada API expone las primitivas necesarias de la plataforma web en dos 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 permite a los autores de contenido para ofrecer una experiencia del usuario diferente, y estas nuevas APIs facilitan para garantizar que el contenido web reaccione a los distintos 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 un nuevo CSS media-feature: device-posture. Esta función multimedia se resuelve en un conjunto de posiciones fijas. Estas posturas consisten 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
posibles posturas:
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 eventos de change.
navigator.devicePosture.addEventListener('change', (e) => {
console.log(`The device posture changed to type ${e.type}`);
});
API de Viewport Segments
Los segmentos de viewport son variables de entorno de CSS que definen la posición y dimensiones de una región del viewport separada de forma lógica. Los segmentos de viewport son que se crea cuando el viewport se divide entre una o más funciones de hardware (como un o una bisagra entre pantallas separadas) que funcionan como divisor. Los segmentos son las regiones del viewport que se pueden tratar como distintas lógicamente autor.
CSS
La cantidad de divisiones lógicas se expone a través de dos nuevos atributos de medios:
que se define en la especificación de consultas de medios de CSS del nivel 5:
vertical-viewport-segments y horizontal-viewport-segments. Se resuelven para
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. 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 de la
viewport con un DOMArray que describe las coordenadas y el tamaño El segments
es una instantánea del estado determinado cuando se lo consulta, para recibir actualizaciones
valores que necesites para escuchar los cambios de postura o los eventos de cambio de tamaño y volver a consultar
segments.
Prueba las APIs de Foldable
Las APIs de Foldable están disponibles en un prueba de origen de Chrome 125 a Chrome 128. Consulta Comienza a usar las pruebas de origen para obtener información general sobre las pruebas de origen.
Para realizar pruebas locales, las APIs de Foldable se pueden habilitar con la Web experimental
Marca de funciones de la plataforma en
chrome://flags/#enable-experimental-web-platform-features También se puede
habilitado ejecutando Chrome desde la línea de comandos con
--enable-experimental-web-platform-features
Demostraciones
Para ver las demostraciones, consulta las demostraciones Cloud Storage. Si no tienes un dispositivo físico para hacer la prueba, puedes elegir el Galaxy Z Fold 5 o el Asus Zenbook Fold para emular un dispositivo en las Herramientas para desarrolladores de Chrome y alternar entre Continuo y Plegado. También puedes visualizar la bisagra cuando que corresponda.
Vínculos relacionados
- API de Device Posture
- API de Viewport Segments