Oferecer suporte a dispositivos dobráveis com a API Viewport Segments

Alexis Menard

Publicado em 9 de junho de 2025

A API Viewport Segments oferece acesso à posição e às dimensões de uma região logicamente separada da janela de visualização com JavaScript ou CSS e está disponível no Chrome 138.

Os segmentos de viewport são criados quando a viewport é dividida por um ou mais recursos de hardware, como uma dobra ou uma dobradiça entre telas separadas, que atuam como um divisor.

Os segmentos são regiões da janela de visualização que podem ser tratadas como logicamente distintas ao desenvolver seu site ou app. Essas APIs incríveis permitem criar ou otimizar sua interface especificamente para dispositivos dobráveis. Por exemplo, criar uma experiência de usuário de painel duplo ou apenas evitar que o conteúdo seja exibido na dobra.

Desde o teste de origem que fizemos no ano passado, houve duas mudanças:

• O atributo JavaScript segments agora está localizado no objeto window.viewport recém-adicionado, em vez de window.visualViewport.
• O comportamento da propriedade segments quando um dispositivo não está dobrado foi alinhado ao comportamento do CSS desse recurso. Quando um dispositivo não está dobrado (ou não pode ser dobrado), a propriedade segments contém uma matriz de um único segmento que representa o tamanho total da janela de visualização.

Confira as demonstrações de dispositivos dobráveis para ver a API em ação.