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).
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.
continuous
: telas planas, de tablet ou até mesmo curvas.
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.
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.
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.
Links relacionados
- API Device posture
- API Viewport segments