Publicado em: 28 de fevereiro de 2025
De ponta a ponta é um recurso do Android que permite que os aplicativos ocupem toda a largura e altura da tela, desenhando atrás das barras de sistema do Android.
Antes do Chrome 135, o Chrome no Android não desenhava de ponta a ponta. Este guia explica o efeito dessa mudança nos sites e o que você, como desenvolvedor, pode fazer para se adaptar a ela.
Barras em todos os lugares
O Android vem com barras de sistema fornecidas pelo próprio sistema operacional.
Juntas, as barras de status, de legenda e de navegação são chamadas de barras de sistema. Eles mostram informações importantes, como o Nível de bateria, a hora e os alertas de notificação, além de permitir 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.
Na parte de baixo da tela, você encontra a barra de navegação, que permite controlar a navegação usando os controles "Voltar", "Início" e "Visão geral". Pode ser a navegação clássica com três botões ou a barra de navegação por gestos moderna.
Além das barras do sistema Android, o Chrome tem uma barra de endereço que se expande e se retrai dinamicamente conforme você rola a tela.
O Chrome agora é de ponta a ponta
Quando você acessa um site, ele é apresentado em um retângulo conhecido como janela de visualização (layout).
No Chrome para Android, antes do Chrome 135, essa janela de visualização de layout é desenhada entre a barra de status na parte de cima e a barra de navegação por gestos na parte 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 de sistema na parte de cima ou para a barra de navegação por gestos na parte de baixo.
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.
Comportamento do Chrome sem o modo de ponta a ponta
A gravação a seguir mostra o Chrome no Android sem suporte de ponta a ponta. A barra de endereço do Chrome (na parte de cima) sai do caminho dinamicamente conforme a página é rolada. No entanto, a barra de status nativa do Android na parte de cima e a barra de navegação nativa do Android na parte de baixo permanecem fixas.
Aqui, o tamanho da janela de visualização de layout muda conforme a barra de endereço do Chrome é recolhida ou expandida.
Comportamento do Chrome com o modo de ponta a ponta
A partir do Chrome 135, o navegador pode desenhar conteúdo da Web até a borda inferior do dispositivo, estendendo a janela de visualização para a área da barra de navegação por gestos.
De ponta a ponta dinâmico com "o 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, essa barra inferior sai do caminho quando você começa a rolar e afeta o tamanho da janela de visualização.
Na gravação a seguir do Chrome no Android com suporte de ponta a ponta, a barra de endereço e a parte de baixo do Chrome se retraem dinamicamente conforme a página é rolada para baixo. Isso faz com que a janela de visualização se expanda, permitindo que o conteúdo da Web seja desenhado até a borda inferior do dispositivo.
Esse comportamento da barra inferior é o novo padrão do Chrome a partir da versão 135.
Ativação padrão da exibição de ponta a ponta
Os sites criados para o modo de ponta a ponta podem indicar isso ajustando a metatag viewport. Quando ativada, a janela de visualização se estende até a borda inferior por padrão, sem que o queixo fique visível.
Uma página pode indicar que oferece suporte à exibição de ponta a ponta usando a metatag viewport e a chave viewport-fit.
Para ativar a exibição de ponta a ponta, defina viewport-fit como o valor de 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 ponta a ponta, 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 a parte de baixo se move sozinha. Os usuários ainda podem acessar todo o conteúdo do seu site como antes.
No entanto, se você ativar o modo de ponta a ponta por padrão ou tiver um elemento posicionado na parte de baixo da janela de visualização, talvez seja necessário considerar que esse conteúdo pode ser coberto.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
Quando o queixo está presente, o conteúdo inicialmente fica acessível aos usuários, mas é obstruído pela barra de navegação do Android quando o queixo desaparece.
Para mitigar, use as inserções de área segura para sempre posicionar os elementos afetados acima da barra de navegação por gestos na parte de baixo do Android ou para que o plano de fundo se estenda até essa área.
As inserções de área segura
As inserções de área segura são quatro variáveis de ambiente que definem um retângulo pelas inserções superior, direita, inferior e esquerda da borda da janela de visualização.
Combinados, esses quatro valores formam o retângulo da área segura, em que é seguro colocar conteúdo para que ele não seja obstruído por elementos como a barra de navegação por gestos do Android.
Como usar o encarte 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 eles fiquem 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 fiquem 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);
}
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 é removido, o conteúdo restante da página fica visível na área da barra de navegação por gestos. Isso ocorre 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 renderizado abaixo do conteúdo fixado na parte de baixo, uma abordagem usada com frequência é definir o padding-bottom como safe-area-inset-bottom. Dessa forma, o elemento fixado na parte de baixo aumenta automaticamente à medida que a barra de navegação é ocultada. Embora isso funcione, essa abordagem não é recomendada, porque resulta em layout thrashing enquanto a barra inferior se move.
Não defina o padding como um valor de safe-area-inset.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px); /* 🛑 Don't do this, as it causes layout thrashing. */
}
Como usar o encarte inferior da área segura e o encarte máximo inferior da área segura
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 move, o safe-area-max-inset-bottom representa o valor máximo do safe-area-inset-bottom.
Use esse safe-area-max-inset-bottom para aumentar o elemento fixado na parte de baixo e combine-o com safe-area-inset-bottom para puxar o elemento para baixo, de modo que ele fique atrás do queixo.
Use o safe-area-max-inset-bottom em combinação com o 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));
}
Confira uma demonstração ao vivo
O resultado visual é o mesmo da abordagem padding-bottom: env(safe-area-inset-bottom, 0px);, mas o desempenho é muito melhor. Como apenas o valor calculado para bottom precisa mudar conforme o queixo se afasta, não ocorre thrashing de layout.
Teste o modo de ponta a ponta antes do Chrome 135
Para testar o recurso de ponta a ponta antes do lançamento público estável, é necessário ativar algumas flags de recursos do Chrome em chrome://flags:
EdgeToEdgeBottomChin(se você definir como "Enabled Debug", metade da barra de navegação vai ficar rosa para que seja mais fácil distinguir de outras interfaces)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor(não defina como "Ativado", mas como "Ativar envio de yOffset")DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint(não defina como "Ativado", mas como "Variação rolável ativada")
Verifique se as seguintes flags não estão ativadas:
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
Reinicie o Chrome duas vezes.
Queremos saber sua opinião
Se você tiver feedback sobre o Chrome e a implementação de ponta a ponta, entre em contato registrando um bug do Chromium no componente "UI > Browser > Mobile > EdgeToEdge". Agradecemos seu comentário.