Site para celular dobrável em 2026: como eu desenho para o iPhone Duo e o Galaxy Z Fold8

Um site pronto para celular dobrável em 2026 é aquele que funciona bem nos dois estados do aparelho: fechado, como um celular comum, e aberto, como um tablet pequeno de proporção quase quadrada. Na prática, isso significa trocar a lógica de "mobile e desktop" por uma lógica de espaço disponível, com layouts que se reorganizam quando a tela se abre e que respeitam a dobra no meio. Com o iPhone Duo chegando às lojas em outubro, esse ajuste deixou de ser detalhe para virar requisito.

Por que o celular dobrável virou pauta de web design agora

Eu acompanho dobráveis desde os primeiros Galaxy Fold e, sinceramente, por muito tempo tratei o formato como nicho. Em 2026 isso mudou por dois motivos bem concretos.

• Samsung mudou a proporção. No Unpacked de 22 de julho de 2026, a Samsung apresentou o Galaxy Z Fold8 com tela interna de 7,6 polegadas em proporção 4:3, mais larga e mais baixa que as gerações anteriores. Aberto, ele se comporta como um tablet compacto.
• A Apple entrou no jogo. No evento de 9 de setembro de 2026, a Apple anunciou o iPhone Duo, com tela externa de 5,4 polegadas e tela interna de 7,6 polegadas. A pré-venda começa em 16 de outubro e as vendas em 23 de outubro, a partir de US$ 1.999.
• O navegador já entende a dobra. A Viewport Segments API, disponível no Chrome desde a versão 138, permite que o CSS saiba quando a tela está dividida em duas regiões e onde fica cada uma.

Na minha experiência, quando a Apple lança um formato, o cliente de ticket alto adota rápido. E é justamente esse cliente que muitas marcas com quem trabalho aqui no Studio Seu querem atingir.

O que quebra num site comum quando a tela se abre

Antes de falar de solução, vale mostrar o problema. Quando eu testo sites em um dobrável aberto, os mesmos defeitos aparecem quase sempre:

• Layout mobile esticado. A tela aberta fica num limbo entre celular e tablet, e o site entrega a versão de celular esticada, com botões enormes e linhas de texto longas demais.
• Conteúdo cortado pela dobra. Um título ou um botão de compra centralizado cai exatamente no vinco da tela.
• Imagens de hero pensadas para 9:16. Numa tela 4:3, aquela foto vertical linda vira um recorte estranho.
• Estado perdido na transição. A pessoa abre o celular no meio do checkout e o site recarrega ou pula de volta para o topo.

Como eu desenho um site para celular dobrável

1. Penso em espaço, não em dispositivo

Aqui no Studio Seu eu parei de desenhar "a versão mobile" e "a versão desktop" faz tempo. Uso container queries para que cada bloco decida seu próprio layout de acordo com o espaço que recebe. Isso resolve metade do problema do dobrável sem uma linha de código específica para ele, porque a tela aberta simplesmente vira mais um tamanho possível.

2. Crio um layout intermediário de verdade

A faixa entre 600 e 900 pixels de largura costuma ser a mais abandonada em qualquer projeto. Eu desenho essa faixa com a mesma atenção que as outras: grid de duas colunas, tipografia com tamanho fluido e imagens com recorte pensado para proporções próximas do quadrado. Em e-commerce, é onde eu coloco foto do produto de um lado e informação de compra do outro.

3. Respeito a dobra como elemento de layout

Com a Viewport Segments API, consigo detectar quando há dois segmentos lado a lado usando a media query horizontal-viewport-segments: 2 e as variáveis de ambiente que informam a posição de cada segmento. Com isso, evito que texto ou botão caia no vinco e posso até usar a dobra a meu favor: galeria de um lado, detalhes do outro. Como o suporte ainda não é universal entre navegadores, trato isso como melhoria progressiva. O site precisa ficar bom sem ela e ficar ótimo com ela.

4. Guardo o estado durante a transição

Abrir o celular não pode custar a sacola de compras. Eu garanto que formulário, scroll e carrinho sobrevivam à mudança de tamanho, e testo isso de propósito, abrindo e fechando o aparelho no meio do fluxo.

5. Produzo imagem e vídeo em mais de um recorte

Como boa parte do trabalho do Studio Seu envolve audiovisual, isso pesa muito para mim. Hoje eu já planejo as peças em 9:16, 4:5 e 16:9, e agora incluo também um recorte próximo de 4:3 para as imagens principais do site. Uso a tag picture e art direction para servir o enquadramento certo para cada formato.

Vale a pena investir nisso agora?

Minha opinião honesta: ninguém precisa refazer o site inteiro por causa do iPhone Duo. Mas quem vende para público premium, tem e-commerce ou depende de vídeo na página deveria revisar pelo menos as páginas que mais convertem. É um ajuste de dias, não de meses, e o ganho de percepção de marca é real. Quem abre um aparelho de quase dois mil dólares e vê um site torto associa aquilo à marca, não ao navegador.

Perguntas frequentes

Preciso de um site separado para celulares dobráveis?

Não. Um site bem feito com layout fluido e container queries atende dobráveis sem versão separada. O que muda é dar atenção à faixa intermediária de tamanho e à dobra.

O que é a Viewport Segments API?

É uma API da web que informa ao CSS e ao JavaScript quando a tela está dividida em regiões, como nos dobráveis abertos, e qual a posição de cada região. Ela está disponível no Chrome desde a versão 138.

Quando o iPhone Duo chega às lojas?

A Apple anunciou pré-venda em 16 de outubro de 2026 e início das vendas em 23 de outubro de 2026, com preço inicial de US$ 1.999.

Como eu testo meu site num dobrável sem ter o aparelho?

As ferramentas de desenvolvedor do Chrome permitem emular dispositivos dobráveis e dois segmentos de tela. Mesmo assim, eu recomendo testar num aparelho real antes de publicar mudanças importantes.

Minha conclusão

Cada novo formato de tela é um teste de maturidade para o design de uma marca. Sites construídos como sistema, com componentes que se adaptam ao espaço, atravessam essas mudanças quase sem esforço. Sites montados como uma pilha de telas fixas sofrem a cada lançamento. Se você quer saber como o seu site se comporta num celular dobrável, ou quer desenhar a próxima versão já pensando nisso, fale comigo aqui no Studio Seu. Vou gostar de olhar com você.