Olá, Web Developers!
Estamos cada vez mais próximos do lançamento oficial do iPhone X, e já apareceu um problema que pode ocorrer no layout de muitos sites.
Curso HTML5 + CSS3 - Dominando o CSS Grid Layout
Conhecer o cursoHá algum tempo, empresas como Samsung, vêm investindo na ideia de fazer com que seus smartphones possuam uma tela mais ampla e, para isso, veio a ideia de remover o botão home físico da parte da frente.
A Apple seguiu a ideia. Porém, ela decidiu ir além, deixando a tela ainda mais expandida, cobrindo quase toda a parte frontal, exceto pelo espaço ocupado pela câmera, como podemos ver na imagem abaixo:
(Jogo sendo executado em um iPhone X)
Isso pode resultar em situações um pouco estranhas ao navegar pela web. Quando o iPhone está na vertical, não há problemas, mas, quando se está com ele na horizontal, para poder acomodar bem as páginas web e evitar que o espaço da câmera cubra algum conteúdo (como o jogo mostrado acima), é criada uma “área de segurança”.
Em muitos sites isso pode resultar em bordas brancas indesejadas, como o exemplo abaixo:
Há pessoas que já reclamaram, dizendo: “Steve Jobs nunca deixaria isso acontecer”. Sendo verdade ou não, é uma realidade.
Temos duas formas de arrumar isso. Veremos abaixo.
Com background-color
Caso a sua página tenha uma única cor como fundo, a solução é a mais simples de todas. Há pessoas que criam um container para a aplicação e inserem a cor de fundo nele. Para resolver o problema, simplesmente coloque a cor de fundo na propriedade background-color da tag <body>.
A sua página vai continuar com as bordas laterais, mas agora ela terá uma cor igual ao do fundo da página, que a tornará imperceptível para o usuário.
Porém, se sua página possui vários fundos, isso não irá resolver. Na home do site do TreinaWeb temos cores diferentes, então, colocar uma só cor no fundo não é uma opção.
Com viewport-fit
Caso você tenha vários fundos, ou uma imagem/vídeo como fundo, ou se ainda quiser ter mais controle do layout, background-color não irá te ajudar.
Neste caso, podemos aproveitar o viewport-fit:
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
Isso fará com que sua página ocupe toda a área da tela do dispositivo:
Isso fará com que parte da sua página passe por baixo da área da câmera, mas agora você tem mais controle e pode definir margens para o seu conteúdo ser exibido corretamente.
As constantes safe-area-inset-*
O Safari do iOS 11 também inclui algumas constantes que podem ser usadas quando usamos o viewport-fit=cover.
- safe-area-inset-top
- safe-area-inset-right
- safe-area-inset-bottom
- safe-area-inset-left
Essas constantes podem ser usadas nas propriedades CSS margin, padding e top, left, right e bottom quando a posição do elemento for position: absolute.
.my-container{
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
}
Por que devo dar atenção a isso?
Muitos desenvolvedores pensam nesses ajustes como as antigas “gambiarras” que tínhamos que fazer para que um layout moderno funcionasse em versões específicas do Internet Explorer, usando variáveis e funcionalidades específicas de um único navegador.
Porém, também devemos pensar que haverá usuários com esses dispositivos e eles não culparão o aparelho. Eles irão pensar: “há algo errado com esta página”.
Alguns desenvolvedores estão até aproveitando para brincar com o espaço ocupado pela câmera:
