Cómo admitir dispositivos plegables con la API de Viewport Segments

Alexis Menard

Publicación: 9 de junio de 2025

La API de Viewport Segments ofrece acceso a la posición y las dimensiones de una región lógicamente separada del viewport con JavaScript o CSS, y está disponible desde Chrome 138.

Los segmentos del viewport se crean cuando el viewport se divide por una o más funciones de hardware, como un pliegue o una bisagra entre pantallas separadas, que actúan como un divisor.

Los segmentos son regiones del viewport que puedes tratar como lógicamente distintas cuando desarrollas tu sitio o app. Estas emocionantes APIs te permiten crear o optimizar tu interfaz específicamente para dispositivos plegables. Por ejemplo, crear una experiencia de usuario de panel doble o simplemente evitar que el contenido se distribuya en el pliegue.

Desde la prueba de origen que ejecutamos el año pasado, hubo dos cambios:

• El atributo segments de JavaScript ahora se encuentra en el objeto window.viewport recién agregado en lugar de window.visualViewport.
• El comportamiento de la propiedad segments cuando un dispositivo no está plegado se alineó con el comportamiento de CSS de esta función. Cuando un dispositivo no está plegado (o no se puede plegar), la propiedad segments contendrá un array de un solo segmento que representa el tamaño completo del viewport.

Consulta las demostraciones de dispositivos plegables para ver la API en acción.