O Chrome está testando duas APIs, a API Device Posture e a API Viewport segmentos Enumeration, que estão disponíveis como um teste de origem no Chrome 125. Elas são conhecidas coletivamente como APIs dobráveis, projetadas para ajudar os desenvolvedores a trabalhar com 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 costura) e dispositivos com duas telas (com emenda, também conhecidos como dispositivos de tela dupla).
Esses dispositivos apresentam desafios e oportunidades para desenvolvedores. Elas oferecem outras maneiras de visualizar o conteúdo. Por exemplo, um usuário pode segurar um dispositivo perfeito, 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 oferecem maneiras para os desenvolvedores proporcionarem melhores experiências do usuário para esses dispositivos. Cada API expõe as primitivas necessárias 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_ posição_ ou o estado físico do dispositivo. Eles podem mudar o formato, permitindo que os autores de conteúdo ofereçam uma experiência de usuário diferente. Essas novas APIs garantem que o conteúdo da Web possa reagir aos vários estados de dobra.
Há duas posições em que um dispositivo pode estar:
folded: posições de laptops ou livros.
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 para um conjunto de posturas 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
possíveis posturas:
foldedcontinuous
Novas posturas 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 é disponibilizado.
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 segmentos
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 de visualização. Os segmentos da janela de visualização são criados quando são divididos por um ou mais recursos de hardware (como uma dobra ou articulação entre telas separadas) que atuam como um 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 CSS nível 5 das consultas de mídia:
vertical-viewport-segments e horizontal-viewport-segments. Eles se baseiam no
número de segmentos em que a janela de visualização está 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 a posição x e y, respectivamente, na grade bidimensional criada pelos recursos de hardware que separam os segmentos.
O snippet de código a seguir é um exemplo simplificado de 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 em
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 que descreve as coordenadas e o tamanho. O campo segments
é um snapshot do estado determinado quando consultado. Para receber valores atualizados, você precisa detectar mudanças de posição ou redimensionar eventos e repetir a
propriedade segments.
Teste as APIs dobráveis
As APIs dobráveis estão disponíveis em um teste de origem do Chrome 125 ao 128. Consulte Começar a usar testes de origem para conferir informações básicas sobre eles.
Para testes locais, as APIs dobráveis podem ser ativadas com a flag de recursos
da plataforma da 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 as demonstrações, consulte o repositório de demonstrações (link em inglês). Se você não tem um dispositivo físico para testar, pode escolher o dispositivo emulado Galaxy Z Fold 5 ou Asus Zenbook Fold no Chrome DevTools e alternar entre Contínuo e Dobrado. Também é possível visualizar a articulação quando aplicável.
