Celulares Dobráveis Chegaram: É Hora de Adaptar Seus Sites

Vamos ser diretos — celulares dobráveis já circulam pela periphery do mundo tech há alguns anos. Usuários Android já vivem a vida dos dobráveis enquanto o resto de nós assistia da arquibancada, vez ou outra babando diante daqueles demos elegantes. Mas a Apple finalmente deu o salto, e independentemente de qual time você torce, essa mudança tem implicações enormes para a comunidade de desenvolvimento web.

Como alguém que acompanha esse universo de perto (e pode ter passado um tempo vergonhoso brincando com o simulador do Duo no fim de semana), posso afirmar: as APIs web que suportam esses dispositivos são surpreendentemente robustas. A Apple soltou seis vídeos cobriendo como construir apps para o Duo, e embora muito disso seja território nativo do iOS, deixaram a porta escancarada para desenvolvedores web com APIs genuinamente interessantes.

Então vamos mergulhar no que você pode usar hoje.

A API de Postura do Dispositivo: Conheça Sua Dobra

Primeiro temos a Device Posture API. Essa interface esperta te diz se o usuário está olhando para uma tela plana, dobrada, ou algo intermediário. Pense nela como seu dispositivo dando um status update sobre seu estado físico.

Em JavaScript, você acessa via navigator.devicePosture, que revela se a tela está continuous (display plano normal) ou folded (parcialmente fechada como um laptop). Em CSS, fica ainda mais limpo com a media query device-posture:

@media (device-posture: folded) {
  .app-container {
    flex-direction: column;
  }
}

Isso é enorme para players de mídia, visualizadores de documento, ou qualquer app que se beneficie de uma configuração de duas telas. Imagine seu player de vídeo movendo automaticamente os controles para a tela de baixo quando o dispositivo está dobrado — sim, isso funciona.

A API de Segmentos da Viewport: Divida e Governe

Se a Device Posture API te diz o estado do dispositivo, a Viewport Segments API descreve sua anatomia. Quando um celular dobrável está parcialmente fechado, ele cria regiões distintas da tela, e essa API permite consultar esses segmentos programaticamente.

Em JavaScript, window.visualViewport.segments retorna um array de DOMRects descrevendo o tamanho, forma e posição de cada segmento. Em CSS, você ganha ainda mais flexibilidade:

/* Alvo layouts baseado no número de segmentos */
@media (horizontal-viewport-segments: 2) {
  .content-grid {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}

As variáveis de ambiente do CSS são particularmente elegantes. env(viewport-segment-width 1 0) te dá a largura do segmento no índice horizontal 1, índice vertical 0. Leva um tempinho para entender o sistema de coordenadas, mas quandoencaixa, as possibilidades são infinitas.

Por Que Isso Importa Para Seus Projetos

Aqui vai o ponto — celulares dobráveis não são mais um produto de nicho. Eles estão se tornando mainstream, e as APIs web já estão aqui para suportá-los. Na NameOcean, conversamos muito sobre construir para o futuro, e esse é um exemplo perfeito de por que isso importa.

Para startups e desenvolvedores, isso abre padrões de interação totalmente novos. Um app de viagem poderia mostrar um mapa em uma tela e detalhes de reserva na outra. Um site de e-commerce poderia exibir imagens do produto em um segmento e avaliações no outro. Um editor de código finalmente poderia dar aos desenvolvedores mobile uma experiência real de split-view sem precisar de nenhum app nativo.

A dobra não é uma limitação — é uma oportunidade. E com essas APIs, você pode construir experiências que parecem nativas para hardware dobrável enquanto continuam acessíveis para todos na web convencional.

Começando Agora

A melhor parte? Você não precisa sair correndo para comprar um celular dobrável para começar a experimentar. O Safari Technology Preview e o Chrome DevTools ambos têm suporte a simulador para testar essas APIs. Rode um dispositivo virtual, alternne entre estados plano e dobrado, e assista seus layouts se adaptarem em tempo real.

Se você administra um site de negócios ou web app, agora é a hora de auditar sua estratégia de design responsivo. A questão não é se celulares dobráveis vão importar — é se você estará pronto quando seus usuários começarem a aparecer com eles.

A plataforma web continua evoluindo de formas fascinantes, e APIs como essas provam que ela pode se mover rápido quando hardware inspira novas interações. Sua vez de dobrar.