Esta página foi traduzida pela API Cloud Translation.

Teste de origem para APIs dobráveis

Alexis Menard

Thomas Steiner

O Chrome está testando duas APIs, a API Device posture e a API Viewport Segments Enumeration, que estão disponíveis como um teste de origem do Chrome 125. Elas são conhecidas coletivamente como APIs dobráveis, projetadas para ajudar os desenvolvedores a trabalhar em dispositivos dobráveis. Esta postagem apresenta essas APIs e fornece informações sobre como começar a testá-las.

Existem principalmente dois formatos físicos diferentes: dispositivos com uma única tela flexível (sem interrupções) e dispositivos com duas telas (com costura, também conhecidos como dispositivos de tela dupla).

Desenho esquemático de um dispositivo com uma única tela flexível (ininterrupta) à esquerda e um dispositivo com duas telas (com costura, também conhecida como tela dupla) à direita.

Esses dispositivos apresentam desafios e oportunidades para os desenvolvedores. Eles oferecem outras maneiras de visualizar o conteúdo. Por exemplo, um usuário pode segurar um dispositivo sem costura, como um livro, e depois passar a usá-lo como um tablet com tela plana. Dispositivos com duas telas têm uma junção física entre as telas que pode precisar ser considerada.

Essas novas APIs fornecem maneiras para os desenvolvedores proporcionarem melhores experiências do usuário nesses dispositivos. Cada API expõe os primitivos necessários da plataforma da Web de duas maneiras: por CSS e JavaScript.

API Device posture

Os dispositivos dobráveis têm recursos que permitem mudar a_postura_ ou o estado físico do dispositivo. Eles podem mudar o formato, permitindo que os autores de conteúdo ofereçam uma experiência do usuário diferente, e essas novas APIs garantem que o conteúdo da Web possa reagir aos vários estados de dobra.

Um dispositivo pode estar em duas posições:

folded: posições de laptop ou livro.

Desenho esquemático de dispositivos na posição plana ou de tablet e uma tela curva suave.

continuous: telas planas, de tablet ou até mesmo curvas.

Desenho esquemático de dispositivos nas posições de laptop ou livro.

CSS

A especificação da API Device Posture define um novo recurso de mídia CSS: device-posture. Esse recurso de mídia se resolve com um conjunto de posições fixas. Essas posições consistem em vários valores predefinidos que abrangem um estado físico do dispositivo.

Os valores do recurso device-posture correspondem à descrição anterior de posturas possíveis:

folded
continuous

Novas posições poderão ser adicionadas no futuro se novos dispositivos chegarem ao mercado.

Por exemplo:

/* 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 a posição de um dispositivo, um novo objeto DevicePosture está disponível.

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

Para reagir a mudanças de posição do dispositivo, como um usuário abrindo totalmente um dispositivo e mudando de folded para continuous, inscreva-se em eventos change.

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

API Viewport Profiles

Os segmentos da janela de visualização são variáveis de ambiente CSS que definem a posição e as dimensões de uma região logicamente separada da janela. Os segmentos de janela de visualização são criados quando ela é dividida por um ou mais recursos de hardware (como uma dobra ou articulação entre telas separadas) que atuam como divisor. Os segmentos são as regiões da janela de visualização que podem ser tratadas como logicamente distintas pelo autor.

CSS

O número de divisões lógicas é exposto por meio de dois novos recursos de mídia, definidos na especificação de nível 5 das consultas de mídia CSS: vertical-viewport-segments e horizontal-viewport-segments. Eles são resolvidos para o número de segmentos em que a janela de visualização é dividida.

Além disso, novas variáveis de ambiente foram adicionadas para consultar as dimensões de cada divisão lógica. Essas variáveis são:

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 variável tem duas dimensões, que representam as posições x e y, respectivamente, na grade bidimensional criada pelos recursos de hardware que separam os segmentos.

Diagrama mostrando segmentos horizontais e verticais. O primeiro segmento horizontal é x 0 e y 0, o segundo x 1 e y 0. O primeiro segmento vertical é x 0 e y 0, o segundo x 0 e y 1. — O primeiro segmento horizontal é x 0 e y 0, o segundo x 1 e y 0. O primeiro segmento vertical é x 0 e y 0, o segundo x 0 e y 1.

O snippet de código abaixo é um exemplo simplificado da criação de uma UX dividida em que temos duas seções de conteúdo (col1 e col2) em cada lado da dobra.

<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>

As fotos a seguir mostram como é a experiência em um dispositivo físico.

Smartphone dobrável na posição vertical de livro.

Smartphone dobrável na posição horizontal de livro.

Tablet dobrável na posição horizontal de livro.

JavaScript

Para conferir o número de segmentos da janela de visualização, verifique a entrada segments no visualViewport.

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

Cada entrada na matriz segments representa cada segmento lógico da janela de visualização com um DOMArray descrevendo as coordenadas e o tamanho. O campo segments é um snapshot do estado especificado quando consultado. Para receber valores atualizados, é preciso detectar as mudanças de posição ou redimensionar eventos e consultar novamente a propriedade segments.

Testar as APIs dobráveis

As APIs dobráveis estão disponíveis em um teste de origem do Chrome 125 ao 128. Consulte Primeiros passos com testes de origem para ter informações gerais sobre esses testes.

Para testes locais, as APIs dobráveis podem ser ativadas com a flag de recursos da plataforma Web experimental em chrome://flags/#enable-experimental-web-platform-features. Ele também pode ser ativado executando o Chrome na linha de comando com --enable-experimental-web-platform-features.

Demonstrações

Para ver demonstrações, consulte o repositório de demonstrações. Se você não tiver um dispositivo físico para testar, escolha o dispositivo emulado Galaxy Z Fold 5 ou Asus Zenbook Fold no Chrome DevTools e alterne entre Contínuo e Dobrado. Também é possível visualizar a articulação, quando aplicável.

Chrome DevTools emulando um dispositivo dobrável.

Links relacionados

API Device posture
API Viewport segments