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.
Há 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:
