Publicado em: 28 de fevereiro de 2025
O recurso de ponta a ponta é uma funcionalidade do Android que permite que os aplicativos abranjam toda a largura e altura da tela ao renderizar atrás das barras de sistema do Android.
Antes do Chrome 135, o Chrome no Android não renderizava 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.
Bares em qualquer lugar
O Android vem com barras de 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 de 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.
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 com três botões ou a barra de navegação por gestos moderna.
Além das barras de sistema do Android, o próprio Chrome vem com uma barra de endereço que se expande e se retrai dinamicamente conforme você rola a tela.
O Chrome vai 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 da versão 135, essa janela de visualização de layout era desenhada entre a barra de status superior e a barra de navegação por gestos inferior. A presença (ou ausência) da barra de endereço do Chrome pode afetar o tamanho da janela de visualização, mas ela nunca vai se expandir para a barra de sistema superior ou a barra de navegação por gestos inferior.
A partir do 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 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 à medida que a página é rolada. No entanto, a barra de status superior nativa do Android e a barra de navegação nativa do Android na parte de baixo permanecem fixas.
Aqui, o tamanho da janela de visualização do layout muda conforme a barra de endereços do Chrome se retrai ou expande.
Comportamento do Chrome com ponta a ponta
A partir do Chrome 135, o navegador pode mostrar 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.
Dinâmica de ponta a ponta com "o queixo"
Por padrão, o Chrome de ponta a ponta mostra uma nova barra inferior dinâmica conhecida como "o 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 ponta a ponta, a barra de endereço do Chrome e o queixo se retraem dinamicamente à medida que a página rola para baixo. Isso faz com que a janela de visualização se expanda, permitindo que o conteúdo da Web seja exibido até a borda inferior do dispositivo.
Esse comportamento de queixo é o novo padrão do Chrome a partir da versão 135.
Exibição de ponta a ponta por padrão com uma opção de ativação
Os sites criados para serem 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 a esse recurso usando a metatag viewport e a chave viewport-fit.
Para ativar o modo de ponta a ponta, defina viewport-fit como o valor de cover.
<meta name="viewport" content="width=device-width, initial-scale=1, viewpo>rt-fit=cover" /
Saiba mais sobre os vários valores de viewport-fit na 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 o queixo inferior se move sozinho. Os usuários ainda podem acessar todo o conteúdo do seu site como faziam antes.
No entanto, se você ativar a opção de ir 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 pode ser acessado pelos usuários, mas fica obstruído pela barra de navegação do Android à medida que o queixo desaparece.
Para mitigar, use os encartes de área segura para sempre posicionar os elementos afetados acima da barra de navegação por gestos na parte de baixo nativa do Android ou para estender o plano de fundo deles até essa área.
Os encartes da área segura
Os encartes de área segura são quatro variáveis de ambiente que definem um retângulo pelos encartes superior, direito, inferior e esquerdo 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 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 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 é movido para fora do caminho, 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 renderizado abaixo do conteúdo ancorado na parte de baixo, uma abordagem usada com frequência é definir o padding-bottom como o safe-area-inset-bottom. Assim, o elemento ancorado na parte de baixo cresce automaticamente à medida que o queixo se esconde. Embora isso funcione, essa abordagem não é recomendada, já que resulta em layout thrashing enquanto o queixo se move para fora do caminho.
Não defina o padding como um valor de encarte de área segura.
.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 conforme 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 ancorado na parte de baixo na frente 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));
}
Teste 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 de bottom precisa mudar à medida que 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 da versão estável, é necessário ativar algumas flags de recursos do Chrome em chrome://flags:
EdgeToEdgeBottomChin(opcionalmente, defina como "Ativar depuração" para colorir metade do queixo em rosa e distinguir melhor de outras interfaces)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor(não defina como "Ativado", mas como "Ativado Dispatch 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, envie um bug do Chromium no componente "UI > Browser > Mobile > EdgeToEdge". Agradecemos seu comentário.