Como corrigir sites e definir área segura no Safari do iPhone X

iPhone X – Conceito de navegação na Web

O Safari exibe sites lindamente na tela do novo iPhone X. Ele otimiza os sites automaticamente, organizando o conteúdo do site dentro da área segura da tela, impedindo que o conteúdo seja misturado com os cantos arredondados ou pela câmera frontal TrueDepth.

O background é preenchido de acordo com o que foi definido no background-color: (conforme especificado no código-fonte do site) e agrupado com o resto do conteúdo da página. Para muitos sites, inclusive se sua página tem somente textos e imagens sob um plano de fundo sólido, isso é o suficiente para um comportamento correto no iPhone X.

Outras páginas — especialmente aquelas projetadas com barras de navegação horizontal de largura total, como da imagem abaixo — deve-se, opcionalmente, ir um pouco mais além para se ter  todos os recursos do novo display. As diretrizes de Interface Humana do iPhone X (iPhone X Human Interface Guidelines) detalham alguns dos princípios gerais de projeto e design para se ter em mente, e a documentação de UIKit (UIKit documentation) discute mecanismos específicos nativos que aplicativos podem adotar para garantir que eles funcionem bem e tirem proveito dos recursos do iPhone X. Seu site pode fazer uso de algumas peças da API WebKit introduzido no iOS 11 para aproveitar ao máximo a natureza da tela borda a borda (edge to edge) do iPhone X.

Clique nas imagens para ver a demonstração ao vivo do site exemplificado.

Safari automaticamente corrige o comportamento do site. Observe as margens.

Usando a tela inteira

O primeiro novo recurso é uma extensão natural para a existente meta tag ViewPort, chamado de viewport-fit, que oferece suporte de controle para o comportamento do site na tela do iPhone X. Este recurso está disponível no iOS 11.

O valor padrão para viewport-fit é auto, que resulta na inserção automática, onde as margens são automaticamente corrigidas, conforme mostrado na imagem anterior. Em contraste a isso, a meta tag viewport-fit configurada como cover faz com que o site tome toda a tela, ignorando os limites de segurança explicitados no iPhone X Human Interface Guidelines. Sua meta tag viewport agora se parece com:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover’

Depois de recarregar a página, a barra de navegação se parece muito melhor, indo de uma extremidade a outra. No entanto, agora fica evidente por que é importante respeitar a área de segurança da tela do iPhone X. Partes do conteúdo da página ficou obscurecida pelo incrível complexo da câmera TrueDepth e a barra de navegação inferior ficou bem difícil de ser usada.

Use a meta tag `viewport-fit=cover` para usar todo espaço da tela.

Respeitando as Áreas Seguras

O próximo passo para tornar a página útil novamente depois da adoção da tag viewport-fit=cover é seletivamente aplicar padding para elementos que contém conteúdo importante, para garantir que eles não serão tapados pela forma da tela do iPhone X.

Isso resultará em uma página que tira o máximo proveito dos recursos da tela maior do iPhone X enquanto ajusta dinamicamente o conteúdo para evitar os cantos, carcaça do sensor e o indicador para acessar a tela inicial

Área segura do iPhone X e área não segura no modo paisagem de orientação.

para conseguir isso, o WebKit no iOS 11 inclui uma nova função CSS, env(),  e um conjunto de quatro variáveis de ambiente pré-definidos, safe-area-inset-left, safe-area-inset-right, safe-area-inset-top e safe-area-inset-bottom. Quando combinadas, elas permitem que as declarações de estilo sejam referência para  as inserções na área segura .

A função env() está presente no iOS 11 com o nome constant(). A partir  do Safari Technology Preview 41 e o beta do iOS 11.2, a função constant() foi removido e substituída por env(). Você pode usar o mecanismo de fallback CSS para apoiar ambas as versões, se necessário, mas deve definir env() primeiro.
env() funciona em qualquer lugar que aceite var() — por exemplo, dentro as propriedades de preenchimento CSS:
.post {
    padding: 12px;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
Para navegadores que não oferecem suporte a env(), a regra de estilo que o declarou será ignorada; por este motivo, é importante continuar a especificar separadamente as regras de fallback para quaisquer declarações usando env().
Área de segurança respeitada, conteúdo apresentado sem falhas.

Correções no modo retrato de orientação

Esta seção de recursos Covers estão disponíveis a partir do Safari Technology Preview 41 e iOS 11.2 beta (e posteriores).

Se você adotar as inserções de área segura em seu projeto de site, você pode notar que é um pouco difícil especificar que você quer um mínimo de  margens além de inserir a área segura. Na página acima, onde substituímos nosso 12px left padding com env(safe-area-inset-left), quando voltarmos para o retrato, a inserção de área segura à esquerda se torna 0px e o texto fica adjacente à borda da tela.

Área de segurança não foi respeitada pelas margens no modo retrato

Para resolver isso, nós temos que especificar que nosso preenchimento deve ser o preenchimento de padrão ou a inserção de área segura, o que for maior. Isto pode ser feito com a nova função CSS min() and max() que estará disponível em uma versão futura do Safari Technology Preview. Ambas as funções levam um número arbitrário de argumentos e retornam o mínimo ou máximo.

Neste caso foi usadomax():

@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

É importante usar o @supports para detectar o recurso min e max, porque eles não são suportados em todos os lugares, e devido ao tratamento de variáveis inválidas de CSS, não se deve especificar uma variável dentro de @supports.

Em outro exemplo de página, no modo de orientação retrato,env(safe-area-inset-left) resolve 0px, e a função max() resolve o 12px. No modo paisagem, considerando que env(safe-area-inset-left) é maior devido a carcaça da câmera TrueDepth, a função max() deve resolver este tamanho, garantindo que o conteúdo importante é sempre visível.

Use max() para combinar a área de segurança com as margens tradicionais

 

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *