O celular de US$ 2 mil da Apple esconde um segredo de CSS

O recente anúncio do iPhone Duo da Apple, com preço de US$ 1.999, marca um momento crucial para o desenvolvimento web. Com lançamento em 23 de outubro de 2026, este dispositivo, apresentando uma tela externa de 5,4 polegadas e uma interna de 7,6 polegadas, catapulta os celulares dobráveis de uma curiosidade de nicho para uma realidade mainstream para todos os desenvolvedores web. Ignorar esses formatos adaptáveis não é mais uma opção.

Felizmente, os engenheiros de navegadores previram essa mudança. Agora temos uma poderosa media query de CSS, @media (device-posture: folded), projetada especificamente para esses dispositivos. Essa query detecta se um dispositivo está em um estado folded (dobrado), como um livro ou um laptop em miniatura, em vez de sua postura continuous (plana). Ela permite que os desenvolvedores apliquem estilos direcionados para experiências de usuário ideais em várias configurações físicas.

Imagine um post de blog. Em uma tela plana e continuous, um layout de coluna única funciona perfeitamente, maximizando a legibilidade. No entanto, quando o usuário dobra seu iPhone Duo em uma posição semelhante a um livro, essa coluna única pode se tornar desconfortável de ler através do vinco. Com device-posture, você pode facilmente mudar para um layout de duas colunas, colocando o conteúdo elegantemente em cada segmento da tela, melhorando instantaneamente a usabilidade e a interação.

Essa adaptação simples demonstra o poder imediato da media query device-posture. Os desenvolvedores agora podem criar designs responsivos que se ajustam fluidamente não apenas ao tamanho da tela, mas ao modelo de interação física do próprio dispositivo. O Chrome já suporta esses recursos, e o simulador do iPhone Duo no Safari os inclui, embora atrás de uma flag, sinalizando sua disponibilidade generalizada iminente.

Além das regras estáticas de CSS, as experiências web para dispositivos dobráveis realmente brilham com interações dinâmicas. A Device Posture API para JavaScript permite que seu site responda a como um usuário segura seu iPhone Duo ou outro dobrável, proporcionando uma experiência mais rica e intuitiva. Ela vai além de apenas estilizar para estados planos ou dobrados, permitindo reações em tempo real.

Sua aplicação pode ouvir um evento change na postura do dispositivo, disparando ações sempre que o estado do celular transita entre continuous (plano) e folded (dobrado). Isso significa que você pode pausar automaticamente um vídeo quando um usuário começa a fechar o celular, ou salvar o progresso de um formulário instantaneamente conforme ele muda de postura. Imagine um aplicativo de receitas mostrando ingredientes em uma tela e instruções na outra, dividindo o conteúdo dinamicamente conforme o dispositivo é dobrado.

Detectar essas mudanças de estado de dobra com JavaScript é simples. Aqui está um trecho fundamental:

if ('ondeviceposturechange' in window) { window.addEventListener('deviceposturechange', (event) => { const currentPosture = event.target.devicePosture.type; console.log(`Device posture changed to: ${currentPosture}`); // Implemente ações dinâmicas aqui com base no currentPosture ('continuous' ou 'folded') });
}

Este ouvinte de eventos fornece o devicePosture.type, permitindo que você crie experiências web dobráveis mais interativas e intuitivas. O Chrome e o Samsung Internet já suportam totalmente esta API, enquanto o simulador do iPhone Duo no Safari a inclui atrás de uma feature flag, indicando suporte futuro para o dispositivo de US$ 1.999 da Apple.

Dispositivos dobráveis introduzem um conceito fascinante: viewport segments. Quando um iPhone Duo é dobrado, ele apresenta duas regiões de exibição distintas, cada uma controlável de forma independente. Isso vai além de simplesmente reagir a uma dobra; você pode projetar para experiências genuínas de tela dupla, tratando cada segmento como sua própria tela.

Para posicionar o conteúdo com precisão, os desenvolvedores usam variáveis de ambiente CSS. Por exemplo, env(viewport-segment-width) e env(viewport-segment-height) fornecem as dimensões de cada segmento individual. Isso permite que você crie layouts poderosos e adaptáveis, garantindo que os elementos se alinhem perfeitamente ao redor da dobradiça ou lacuna física.

Considere casos de uso avançados que realmente brilham com telas duplas. Um reprodutor de vídeo pode ocupar um segmento, enquanto sua transcrição, capítulos ou comentários relacionados são exibidos de forma interativa no outro. Da mesma forma, um cliente de e-mail pode mostrar sua lista de caixa de entrada em um segmento e o conteúdo completo da mensagem selecionada simultaneamente no segmento adjacente, aumentando a produtividade.

O Chrome já oferece suporte a esses recursos, com a Viewport Segments API disponível a partir do Chrome 138. O Samsung Internet oferece essa funcionalidade há anos em seus telefones dobráveis. Embora o simulador do iPhone Duo do Safari, lançado com o Xcode 27.1, inclua essas APIs atrás de uma feature flag, você pode explorar recursos CSS relacionados, como device-posture, mais a fundo no device-posture CSS media feature - MDN Web Docs.

Exploramos o "porquê" do design consciente de dobráveis; agora, vamos olhar para o "onde". Boas notícias: muitas ferramentas estão prontas hoje! O Chrome oferece suporte estável para a media query device-posture e a API JavaScript, incluindo a Viewport Segments API disponível a partir do Chrome 138. Isso significa que uma parcela significativa do mercado de dobráveis Android já pode experimentar seus layouts aprimorados. O Samsung Internet defende esses recursos há anos, garantindo uma experiência robusta para sua vasta frota de dispositivos dobráveis.

A jornada do Safari está apenas começando. O novo simulador do iPhone Duo, lançado com o Xcode 27.1, inclui notavelmente tanto a device-posture quanto as APIs de viewport segments. Isso sinaliza a clara intenção da Apple de oferecer suporte a esses recursos. No entanto, esses recursos estão atualmente escondidos atrás de uma feature flag, o que significa que, embora a Apple esteja se preparando para o lançamento do iPhone Duo de US$ 1.999 em 23 de outubro de 2026, o suporte total pode não estar habilitado no lançamento.

Então, o que um desenvolvedor deve fazer? Adote o progressive enhancement! Projete sua experiência básica para ser sólida e acessível em todos os navegadores, incluindo aqueles sem APIs para dobráveis, como o Firefox. Em seguida, adicione os recursos avançados de device-posture e viewport segments como aprimoramentos. Essa estratégia garante uma experiência superior e personalizada para usuários em dispositivos dobráveis compatíveis — como uma tela dividida para vídeo e notas — sem comprometer a funcionalidade para ninguém. Trata-se de adaptar-se graciosamente, não de quebrar.

O que é a media query CSS device-posture?

É um novo recurso de mídia CSS que permite que as páginas da web adaptem seu layout com base no estado físico de um dispositivo. Ele possui dois valores principais: continuous para uma tela plana e folded para quando a tela está dobrada ou articulada.

Como controlo o conteúdo em ambos os lados de uma tela dobrada?

Você pode usar a Viewport Segments API. Variáveis de ambiente CSS como viewport-segment-width e viewport-segment-height permitem que você estilize as áreas de tela distintas em cada lado da dobra, criando experiências de tela dupla.

Quais navegadores oferecem suporte atualmente aos recursos CSS para dobráveis?

O Chrome e o Samsung Internet têm suporte total para a media query device-posture e para a Viewport Segments API. O suporte no Safari está disponível no simulador do iPhone Duo, mas atualmente está atrás de uma feature flag. O Firefox ainda não possui suporte.

Qual é a diferença entre a media query CSS e a API JavaScript para dispositivos dobráveis?

A media query CSS device-posture é declarativa, usada para definir layouts com base no estado do dispositivo. A Device Posture API do JavaScript é imperativa, permitindo que você execute código em resposta a eventos de dobra, como pausar um vídeo ou salvar dados.