Guia de migração completa do Chrome no Android

Bramus

Publicado em 28 de fevereiro de 2025

A exibição de borda a borda é um recurso do Android que permite que os aplicativos ocupem toda a largura e altura da tela, sendo exibidos atrás das barras de sistema do Android.

Antes do Chrome 135, o Chrome no Android não renderizava de borda a borda. Neste guia, explicamos o efeito dessa mudança nos sites e o que você, como desenvolvedor, pode fazer para se adaptar a ela.

Observação: a mudança no Chrome 135 é destinada a dispositivos de tela pequena. No momento, o Chrome para Android em dispositivos de tela grande está excluído e será abordado em uma versão futura do Chrome.

Observação: esse recurso está sendo lançado usando uma variação do Chrome. Portanto, você pode encontrá-lo em uma versão anterior do Chrome.

Bares em todos os lugares

O Android vem com barras do sistema fornecidas pelo próprio sistema operacional.

Juntas, a barra de status, a barra de legenda e a barra de navegação são chamadas de barras do sistema. Eles mostram informações importantes, como nível de bateria, hora e alertas de notificação, e permitem a interação direta com o dispositivo de qualquer lugar.

Na parte de cima da tela, você encontra a barra de status, que contém ícones de notificação e do sistema.

A barra de status no Android destacou (source).

Na parte de baixo da tela, você encontra a barra de navegação, que permite controlar a navegação usando os controles de voltar, página inicial e visão geral. Pode ser a navegação clássica de três botões ou a barra de navegação por gestos moderna.

A barra de navegação por gestos (source).

Além das barras do sistema Android, o Chrome vem com uma barra de endereço que se expande e retrai dinamicamente conforme você rola a tela.

O Chrome ocupa toda a tela

Quando você visita um site, ele é apresentado em um retângulo conhecido como viewport (layout).

No Chrome para Android, antes do Chrome 135, essa janela de visualização de layout era exibida entre a barra de status de cima e a barra de navegação de gestos de baixo. A presença da barra de endereço do Chrome (ou a falta dela) pode afetar o tamanho da janela de visualização, mas ela nunca vai se expandir para a barra do sistema de cima ou a barra de navegação por gestos de baixo.

O tamanho mínimo e máximo da viewport no Chrome no Android anterior ao Chrome 135. Esses tamanhos são conhecidos como janela de visualização pequena e grande. A própria viewport tem um contorno azul pontilhado.

No Chrome 135, a janela de visualização pode se estender até a barra de navegação por gestos do Android. Esse é o comportamento descrito como de ponta a ponta.

A viewport grande mostrada no Chrome no Android que não é de borda a borda (à esquerda) e no Chrome que é de borda a borda (à direita). No Chrome com suporte de borda a borda, a viewport se estende até a área da barra de navegação por gestos quando as barras de ferramentas dinâmicas do Chrome são retraídas.

Observação: o Chrome no iOS adicionou suporte de borda a borda com o lançamento do iOS 11.3. As recomendações deste guia também se aplicam ao Chrome no iOS.

Comportamento do Chrome sem a visualização de ponta a ponta

A gravação a seguir mostra o Chrome no Android sem suporte de borda a borda. A barra de endereço do Chrome (na parte de cima) sai do caminho de forma dinâmica conforme a página é rolada. No entanto, a barra de status na parte de cima e a barra de navegação na parte de baixo, nativas do Android, permanecem fixas.

Comportamento anterior: o Chrome no Android sem suporte de borda a borda e https://developer.chrome.com/ carregado.

Aqui, o tamanho da janela de visualização do layout muda conforme a barra de endereço do Chrome se retrai ou se expande.

Comportamento do Chrome com a visualização de ponta a ponta

No Chrome 135, o Chrome pode exibir conteúdo da Web até a borda inferior do dispositivo, estendendo a viewport para a área da barra de navegação por gestos.

Dinâmica de borda a borda com "queixo"

Por padrão, o Chrome de ponta a ponta mostra uma nova barra inferior dinâmica conhecida como "queixo" sobre a área da barra de navegação por gestos. Assim como a barra de endereço do Chrome, esse queixo sai do caminho quando você começa a rolar a tela e afeta o tamanho da janela de visualização.

Na gravação a seguir do Chrome no Android com suporte de borda a borda, a barra de endereço e o queixo do Chrome se retraem dinamicamente à medida que a página rola para baixo. Isso faz com que a viewport se expanda, permitindo que o conteúdo da Web seja exibido até a borda inferior do dispositivo.

Novo comportamento: o Chrome no Android com suporte de borda a borda e https://developer.chrome.com/ carregado. Observe como o queixo inferior desliza para fora à medida que a página rola.

Esse comportamento é o novo comportamento padrão do Chrome a partir do Chrome 135.

Ativação da exibição de ponta a ponta por padrão

Os sites criados para ocupar toda a tela podem indicar isso ajustando a metatag viewport. Quando ativada, a viewport se estende até a borda inferior por padrão, sem que o queixo fique visível.

Novo comportamento com a ativação de ponta a ponta: a janela de visualização se estende até a borda inferior ao carregar a página. Não há queixo.

Uma página pode indicar que oferece suporte a tela cheia usando a metatag viewport e a chave viewport-fit.

Para ativar o modo de tela cheia, defina viewport-fit como o valor cover.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Saiba mais sobre os vários valores de viewport-fit no MDN.

Como lidar com conteúdo que pode ser obstruído pela barra de navegação por gestos

No modo de tela cheia, considere qualquer conteúdo que possa ser obstruído pela barra de navegação por gestos.

Na maioria dos casos, você não precisa fazer nada, porque o queixo inferior se move sozinho. Os usuários ainda podem acessar todo o conteúdo do seu site como antes.

No entanto, se você ativar a visualização de ponta a ponta por padrão ou tiver um elemento posicionado na parte de baixo da viewport, talvez seja necessário considerar o conteúdo que pode ser coberto.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
}

Quando o queixo está presente, o conteúdo pode ser acessado pelos usuários, mas é obstruído pela barra de navegação do Android à medida que o queixo desaparece.

Ilustração de um site com um elemento posicionado na parte de baixo com "bottom: 0". Quando o queixo está visível, o elemento posicionado na parte de baixo fica acima da barra de navegação do Android. Quando o queixo se afasta, o elemento é posicionado atrás da barra de navegação do Android, que o obscurece parcialmente.

Para reduzir o problema, use o preenchimento da área segura para posicionar sempre os elementos afetados acima da barra de navegação de gestos nativa do Android ou para estender o plano de fundo para essa área.

Os insetos da área segura

Browser Support

• 69
• 79
• 65
• 11

Source

Os insets de área segura são quatro variáveis de ambiente que definem um retângulo pelos seus insets superior, direito, inferior e esquerdo na borda da janela de visualização.

Combinados, esses quatro valores formam o retângulo da área segura, em que é possível colocar conteúdo sem que ele seja obstruído por elementos como a barra de navegação por gestos do Android.

Ilustração do Chrome no modo de tela cheia com a viewport e o retângulo da área segura pintado em amarelo. Como o queixo está retraído, o inseto da área segura de baixo impede que o retângulo da área segura chegue à barra de navegação por gestos. Como resultado, você vê a visualização da viewport abaixo dessa barra de navegação por gestos.

Como usar o entalhe inferior da área segura

Para elementos posicionados na parte de baixo da janela de visualização, use safe-area-inset-bottom como o valor da propriedade bottom para evitar que ele seja posicionado abaixo da barra de navegação por gestos. O valor retornado por safe-area-inset-bottom é atualizado dinamicamente à medida que o queixo se move, fazendo com que os elementos posicionados na parte de baixo permaneçam acima da barra de navegação por gestos do Android.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
}

Ilustrações de um site com um elemento posicionado na parte de baixo que usa a área segura inferior com a propriedade bottom. Quando o queixo está visível, a barra fica acima da barra de navegação por gestos do Android. Quando o queixo desaparece, o elemento também fica acima dele.

Como você pode ver nas ilustrações, o resultado ainda não é perfeito: quando o queixo é movido, o conteúdo restante da página fica visível na área da barra de navegação por gestos. Isso acontece porque, nesse estado, a janela de visualização se estende até a área da barra de navegação por gestos.

Para evitar que o conteúdo seja pintado abaixo do conteúdo ancorado na parte de baixo, uma abordagem comum é definir o padding-bottom como safe-area-inset-bottom. Dessa forma, o elemento ancorado na parte de baixo cresce automaticamente à medida que o queixo se esconde. Embora isso funcione, essa abordagem não é recomendada, porque resulta em layout thrashing enquanto o queixo se move.

Não defina padding como um valor de margem de área segura.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

Importante: para evitar regressões de desempenho, o Chrome não deslizará o queixo para longe enquanto você rola a tela quando detectar esse padrão.

Como usar o entalhe da área segura na parte de baixo e o entalhe máximo da área segura na parte de baixo

Em vez disso, a abordagem recomendada é usar uma combinação de safe-area-inset-bottom e safe-area-max-inset-bottom. Ao contrário do safe-area-inset-bottom dinâmico, que é atualizado dinamicamente à medida que o queixo se afasta, o safe-area-max-inset-bottom representa o valor máximo do safe-area-inset-bottom.

Use safe-area-max-inset-bottom para aumentar o elemento ancorado na parte de baixo e combine-o com safe-area-inset-bottom para puxá-lo para baixo, de modo que ele fique atrás do queixo.

Use safe-area-max-inset-bottom em combinação com safe-area-inset-bottom

:root {
  --safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 36px);
  --bottom-bar-height: 50px;
}

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  height: var(--bottom-bar-height);
  padding-bottom: var(--safe-area-max-inset-bottom);
  bottom: calc(env(safe-area-inset-bottom, 0px) - var(--safe-area-max-inset-bottom));
}

body {
  padding-bottom: calc(var(--bottom-bar-height) + var(--safe-area-max-inset-bottom));
}

Testar uma demonstração ao vivo

Observação: o valor padrão de 36px para safe-area-max-inset-bottom é escolhido para atender aos navegadores que não oferecem suporte a safe-area-max-inset-bottom. O valor foi escolhido porque o Safari no iOS no modo de guia única tem um deslocamento mínimo de 36px na parte de baixo no modo retrato.

Importante :o Chrome tem otimizações de código, uma chamada rota rápida, quando detecta o padrão calc(env(safe-area-inset-bottom, …) +/- …);. Esse caminho rápido permite que o conteúdo ancorado na parte de baixo se mova com o queixo de maneira eficiente enquanto ele se afasta.

O resultado visual é o mesmo da abordagem padding-bottom: env(safe-area-inset-bottom, 0px);, mas tem um desempenho muito melhor. Como apenas o valor computado de bottom precisa mudar à medida que o queixo se afasta, não ocorre nenhum conflito de layout.

Ilustrações de um site com um elemento ancorado na parte de baixo que considera os recortes da área segura. Quando o queixo está visível (à esquerda), o elemento fica acima dele. Quando o queixo não está visível, o elemento aparece na barra de navegação por gestos do Android.

Observação: os engastes máximos de área segura (safe-area-max-inset-bottom e amigos) estão disponíveis no Chrome 135.

Teste o modo de tela cheia antes do Chrome 135

Para testar o recurso de borda a borda antes do lançamento público estável, ative várias flags de recursos do Chrome em chrome://flags:

• EdgeToEdgeBottomChin (se definido como "Depuração ativada", metade do queixo será colorido de rosa para diferenciá-lo de outras interfaces)
• DrawCutOutEdgeToEdge
• BottomBrowserControlsRefactor (não defina como "Ativado", mas como "Ativou o envio de yOffset")
• DynamicSafeAreaInsets
• DynamicSafeAreaInsetsOnScroll
• EdgeToEdgeWebOptIn
• DrawKeyNativeEdgeToEdge
• EdgeToEdgeSafeAreaConstraint (não defina como "Ativada", mas como "Ativada, variação rolável")

Verifique se as seguintes flags não estão ativadas:

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

Reinicie o Chrome duas vezes.

Queremos saber sua opinião

Se você tiver feedback sobre o Chrome e a implementação de borda a borda, entre em contato conosco registrando um bug do Chromium no componente "UI > Browser > Mobile > EdgeToEdge". Agradecemos seu comentário.