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

Alexis Menard

Publicado el 9 de junio de 2025

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

Los segmentos de la ventana gráfica se crean cuando la ventana gráfica se divide por una o más características de hardware, como un pliegue o una bisagra entre pantallas separadas, que actúan como un divisor.

Los segmentos son regiones de la ventana gráfica 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 del usuario de doble panel o simplemente evitar que el contenido se diseñe en el pliegue.

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 de la ventana gráfica.

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