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

Alexis Menard

Fecha de 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, ya sea con JavaScript o CSS, y está disponible a partir de 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 divisor.

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

Desde la prueba de origen que realizamos el año pasado, se produjeron dos cambios:

• El atributo segments de JavaScript ahora se encuentra en el objeto window.viewport agregado recientemente 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 demos de dispositivos plegables para ver la API en acción.