Uma dobradiça pode mudar a página, não apenas o hardware
A dobradiça de um dispositivo pode mudar uma página da web, não apenas o hardware. O recurso de mídia CSS device-posture oferece uma maneira poderosa de adaptar o conteúdo da web. Ele distingue entre uma tela continuous, como um tablet plano, e uma postura folded (dobrada), permitindo que os estilos respondam diretamente ao estado físico do dispositivo.
Um vídeo recente da Better Stack demonstrou isso mostrando uma página que mudava de "plana" para "dobrada" quando um hipotético dispositivo dobrável da Apple era dobrado. Embora o vídeo mencione um "celular dobrável de US$ 2.000" ou "iPhone Surface Duo", a Apple não anunciou tal produto; esses são exemplos especulativos para ilustrar a tecnologia.
Essa capacidade, também disponível via API JavaScript, não serve apenas para exibição. O objetivo é o design proposital. Por exemplo, um player de vídeo pode ser exibido em tela cheia quando o dispositivo está continuous e, em seguida, adaptar-se automaticamente para mostrar o vídeo em um segmento e detalhes do capítulo ou comentários no outro quando folded.
O Google Chrome já oferece suporte a esses recursos, e o Samsung Internet oferece recursos semelhantes há anos para dispositivos como o Galaxy Z Fold. O Safari implementou as APIs em um simulador de "iPhone Surface Duo", embora permaneçam atrás de uma feature flag, indicando desenvolvimento inicial em vez de disponibilidade geral. O Firefox ainda não oferece suporte a esses recursos.
Deixe o JavaScript reagir quando o dispositivo dobrar
Assim como o CSS se adapta ao estado físico de um dispositivo, o JavaScript oferece uma contraparte poderosa: a Device Posture API. Você pode acessar a postura atual através de navigator.devicePosture e, mais importante, ouvir as alterações usando seu evento change. Este evento é disparado sempre que o dispositivo faz a transição entre estados como continuous (plano) e folded (dobrado), permitindo que seu aplicativo da web reaja dinamicamente.
Imagine algo além de um contador de dobras divertido! Com esta API, você pode implementar comportamentos realmente úteis. Um player de vídeo pode pausar a reprodução automaticamente quando o dispositivo for dobrado, evitando saltos acidentais, ou um editor de texto pode salvar edições não salvas. Para tarefas de várias etapas, uma dobra pode acionar uma transição para a próxima etapa, garantindo que o contexto do usuário permaneça intacto.
Lembre-se, a postura é um sinal, não uma instrução para o usuário. Evite surpreender os usuários alterando drasticamente a funcionalidade principal ou tornando as ações mais difíceis de alcançar apenas porque o dispositivo dobrou. Em vez disso, use esses sinais para aprimorar a experiência, garantindo que as ações principais permaneçam intuitivas e acessíveis, independentemente de a tela estar plana ou dobrada. O Google Chrome e o Samsung Internet já oferecem suporte a esses recursos, oferecendo ferramentas robustas para a criação de interfaces adaptáveis.
Transforme o vinco em um limite de layout
As dobradiças físicas em dispositivos dobráveis não são apenas recursos de hardware; elas podem dividir uma única tela em vários segmentos de viewport. Isso significa que uma tela dobrada pode expor regiões lógicas separadas, permitindo que os desenvolvedores atribuam conteúdo complementar a cada lado. Em vez de colocar controles ou conteúdo importantes diretamente sobre um vinco de forma desajeitada, você pode projetar painéis distintos.
Considere um player de vídeo: quando o dispositivo está plano, ele pode preencher a tela inteira. Mas, quando dobrado, você pode manter a reprodução do vídeo em um segmento e exibir capítulos, descrições ou comentários no outro. Isso cria uma experiência de usuário mais intuitiva e eficiente, aproveitando ao máximo o formato exclusivo.
O CSS oferece segment media features como horizontal-viewport-segments e vertical-viewport-segments para detectar e estilizar essas regiões individuais. Você pode dimensionar elementos com precisão usando variáveis de ambiente como env(viewport-segment-width 0 0) ou env(viewport-segment-height 0 0) dentro de expressões calc(). Isso ajuda a evitar a colocação de elementos críticos da interface diretamente sobre a dobradiça física.
Embora essas ferramentas sejam poderosas, certifique-se sempre de que seus layouts degradem de forma graciosa em telas tradicionais e contínuas. O Google Google Chrome e o Samsung Internet suportam esses recursos há anos, com o WebKit também fazendo progresso por trás de flags. Para detalhes técnicos mais profundos, explore a especificação Device Posture API - W3C.
Gostando do artigo? Receba um assim na sua caixa de entrada toda manhã.
um e-mail por dia · cancele em dois cliques · sem rastreadores de terceiros
Construa para os navegadores de hoje, não para um iPhone que é apenas um rumor
Então, onde você pode realmente usar esses recursos inteligentes para dobráveis hoje? O Google Google Chrome e o Samsung Internet lideram o caminho, oferecendo suporte robusto para device-posture e segmentos de viewport. O Samsung Internet foi pioneiro nesses recursos anos atrás para seus dispositivos Galaxy Z Fold e Flip, enquanto o Google Google Chrome os promoveu recentemente de testes de origem para suporte básico.
O Firefox, infelizmente, não suporta atualmente essas APIs. O Safari e o WebKit mostraram algum trabalho experimental dentro de um simulador específico de "iPhone Surface Duo", mas esses recursos permanecem atrás de uma flag, não estando disponíveis de forma geral. Verifique sempre as MDN references atuais e as tabelas de compatibilidade de navegadores, já que o suporte evolui rapidamente a cada nova versão do navegador.
Ao construir para dobráveis, adote o progressive enhancement. Primeiro, detecte se navigator.devicePosture existe antes de tentar usá-lo. Segundo, projete um layout básico útil que funcione bem em todas as telas contínuas e, em seguida, adicione estilos específicos para dobráveis.
Sempre teste sua interface em transições de postura. Nunca faça com que conteúdo ou funcionalidade essencial dependa apenas de um estado dobrado; garanta uma experiência perfeita, esteja o dispositivo plano ou dobrado. Seus usuários agradecerão pelo design atencioso.
Perguntas Frequentes
O que a media query CSS device-posture faz?
Ela permite que uma página da web aplique estilos com base na postura física de um dispositivo, como se uma tela dobrável está dobrada ou contínua.
Como os segmentos de viewport ajudam com telas dobráveis?
Eles expõem as regiões distintas de uma tela segmentada para que uma página possa colocar conteúdo em cada lado de uma dobradiça ou vinco.
O JavaScript pode detectar quando um telefone dobrável muda de postura?
Sim. A Device Posture API expõe a postura atual e um evento de mudança que permite que uma página responda quando ela muda.
Todos os navegadores suportam APIs web para dispositivos dobráveis?
Não. O suporte varia: navegadores baseados em Chromium e o Samsung Internet oferecem capacidades, enquanto o Firefox carece de implementação e o suporte do Safari tem sido experimental.
A Apple lançou um iPhone dobrável?
Nenhum iPhone dobrável foi anunciado. O vídeo discute um dispositivo hipotético e relata um trabalho experimental do Safari, não um produto confirmado da Apple.