Áreas seguras
As faixas vermelha, roxa (laterais) e azul (baixo) ocupam só o que o sistema reserva para entalhe, botões ou barra home. Em desktop costumam ter largura 0.
Conteúdo com
padding mínimo respeitando env(safe-area-inset-*) — zoom ou roda o telemóvel para ver as áreas a mudarem.