Remover as Barras Laterais Brancas nos Browsers iOS

Graças à “notch” dos modelos mais recentes de iPhone, existem alguns problemas quanto tentamos ver um website com o smartphone na posição horizontal.

Para acomodar a “notch” desde o iOS 11 os websites ficam contidos numa “zona segura” no ecrã. Na maioria dos websites resulta uma faixa branca de ambos os lados do conteúdo.

Felizmente, graças ao engenheiro de software STEPHEN RADFORD, existem duas maneiras de resolver este problema.

background-color

Se o seu site utilizar um cor de fundo sólida ou se simplesmente quiser alterar a cor das barras a melhor solução é colocar a cor pretendida como background-color na tag <body>.

As margens ficarão intactas mas agora terão a cor escolhida.

viewport-fit

Se preferir ter um controlo extra sobre o seu design ou está a usar um gradient ou uma imagem como background então definir o background-color pode não ser a melhor opção. Na última versão o iOS a Apple adicionou o ajuste da janela de visualização viewport-fit da CSS Round Display Spec.

Simplesmente adicionando viewport-fit=cover à meta tag viewport irá expandir o website para preencher todo o ecrã e não apenas a “zona segura”.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, viewport-fit=cover”>

O resultado será este:

Logicamente, na maioria dos websites, terá de ser feito um ajuste manual para acomodar a “notch” e em alguns poderá mesmo não resultar.

safe-area-inset-*

Existem então algumas constantes que podem ser utilizadas sempre que usar o viewport-fit=cover:

  • safe-area-inset-top
  • safe-area-inset-right
  • safe-area-inset-left
  • safe-area-inset-bottom

Isto pode ser adicionado aos valores de margin, padding ou absolute position.

Podem consultar o artigo original aqui.

Outros Artigos:

Comentários:

0 0 voto
Avaliação do Artigo
Subscrever
Notificar-me sobre:
guest
0 Comentários
Feedbacks em linha
Ver todos os comentários