Pular para o conteúdo

Safe areas do iPhone na web: notch, barra inferior e viewport-fit

No iPhone, o conteúdo do site some atrás da barra inferior ou fica com faixas estranhas nas laterais. Veja como tratar safe areas na web.

Por Equipe We Codex3 min de leitura

O iPhone tem recortes, cantos arredondados e uma barra de gestos na parte inferior. Sites que querem ocupar a tela inteira — com cabeçalhos fixos, menus inferiores e fundos de borda a borda — precisam respeitar essas áreas.

O primeiro passo

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

Com viewport-fit=cover, o site pode desenhar atrás das barras — e se torna responsável por não colocar conteúdo importante ali.

Os recuos do sistema

css
.rodape-fixo {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.cabecalho-fixo {
  padding-top: env(safe-area-inset-top, 0px);
}

As variáveis env(safe-area-inset-*) valem zero no desktop, então o mesmo CSS funciona em qualquer tela.

Onde aplicar

  • Cabeçalhos e barras de navegação fixas.
  • Botões flutuantes de WhatsApp e de compra.
  • Menus e folhas que sobem da parte inferior.
  • Modo paisagem, onde os recuos laterais aparecem.

Altura da tela

A barra de endereço do Safari aparece e some, mudando a altura visível. Unidades como dvh ajudam a evitar elementos cortados.

No app

Em apps React Native, a mesma lógica usa outras ferramentas (Safe areas no React Native: notch, Dynamic Island e barra de gestos).

Faz parte do pacote mobile-first (Mobile-first real: estratégias de grid, tipografia e micro-interações fluidas para telas pequenas).

Este site respeita as safe areas do iPhone. Veja sites da We Codex ou fale com a gente.

  • Safe Area
  • iPhone
  • CSS
  • Mobile
CompartilharWhatsAppLinkedIn

Resolver de vez, com quem faz isso todo dia

Seu site precisa carregar em menos de um segundo e converter mais?

Este artigo mostra o caminho. A implementação sob medida — o detalhe que muda o resultado no seu caso — é o trabalho da We Codex, empresa de engenharia do grupo Wocom.

Desenvolvimento de SitesPerformance WPO 100%SEO, GEO & AIO Inteligente
Conversar sobre o meu caso

Continue lendo

Tudo sobre Web & Performance