O problema do iPhone X e a Web \| TreinaWeb               Promoção no ar   Matricule-se agora e garanta **54% de desconto**  

  Termina em   Tempo restante da oferta: 00 Horas 

 53 Min 

 41 Seg 

   Tempo restante da oferta: 00 53 41 

  [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) 

   [                ](https://www.treinaweb.com.br)  Explorar  

 [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) 

     [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) O problema do iPhone X e a Web  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 

# O problema do iPhone X e a Web

 Com o lançamento do iPhone X, alguns problemas podem "aparecer" em suas páginas web. Saiba quais são e veja como resolvê-los.

 [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 9 anos atrás

  ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/10/o-problema-do-iphone-x-e-a-web.png)  

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.

[  ![Acessibilidade -  Desenvolvendo sites acessíveis](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/acessibilidade-web.svg)   Curso Acessibilidade - Desenvolvendo sites acessíveis Conhecer o curso ](https://www.treinaweb.com.br/curso/acessibilidade-desenvolvendo-sites-acessiveis)

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.

![](https://d2m498l008ebpa.cloudfront.net/2017/10/KhW5flp.jpg)

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:

![](https://d2m498l008ebpa.cloudfront.net/2017/10/uziysdr.png)

![](https://d2m498l008ebpa.cloudfront.net/2017/10/owKKQNV.png)*(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:

![](https://d2m498l008ebpa.cloudfront.net/2017/10/gBi87nu.png)

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 ``.

![](https://d2m498l008ebpa.cloudfront.net/2017/10/C6kbsYt.png)

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`:

```html

```

Isso fará com que sua página ocupe toda a área da tela do dispositivo:

![](https://d2m498l008ebpa.cloudfront.net/2017/10/SufPGFG.png)

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`.

```css
.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:

![](https://d2m498l008ebpa.cloudfront.net/2017/10/ZCxnWXe.gif)

[  ![Vue.js -  Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/vuejs.svg)   Curso Vue.js - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/vuejs-fundamentos)

- [ #Design ](https://www.treinaweb.com.br/blog/tag/design)
- [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end)
- [ #CSS ](https://www.treinaweb.com.br/blog/tag/css)
- [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5)
- [ #iphone ](https://www.treinaweb.com.br/blog/tag/iphone)
- [ #iOS ](https://www.treinaweb.com.br/blog/tag/ios)

Autor

 ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm)

## Akira Hanashiro

 Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. 

 [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro)  

## Continue estudando

 Transforme leitura em prática com os cursos e formações da TreinaWeb.

 [Ver cursos](https://www.treinaweb.com.br/cursos)   

  Continue lendo

## Artigos relacionados

- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/26181326/CAPA-ELTON-MARÇO-400x280.png)  [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 

     8 anos atrás

    ##  [ Como melhorar o retorno das suas APIs no Laravel com API Resource do Eloquent ](https://www.treinaweb.com.br/blog/como-melhorar-o-retorno-das-suas-apis-no-laravel-com-api-resource-do-eloquent) 

     Um dos pontos mais importantes quando estamos trabalhando APIs é o retorno dos dados. Veja como melhorar suas APIs no Laravel usando o API Resouce do Eloquent.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/23151327/PARALISIA-ANÁLISE-400x280.png)  [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 

     8 anos atrás

    ##  [ Paralisia por Análise - o bloqueio que te impede de começar ](https://www.treinaweb.com.br/blog/paralisia-por-analise-o-bloqueio-que-te-impede-de-comecar) 

     Conheça o que é Paralisia por Análise, a razão de várias pessoas não começarem ou finalizarem algo, seja na vida pessoal ou profissional.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/31150916/gatilhos-mentais-400x280.jpg)  [ Marketing Digital ](https://www.treinaweb.com.br/blog/categoria/marketing-digital) 

     8 anos atrás

    ##  [ Gatilhos Mentais Que Envolvem e Influenciam Clientes ](https://www.treinaweb.com.br/blog/gatilhos-mentais-que-envolvem-e-influenciam-clientes) 

     Neste artigo vamos aprender as maiores técnicas de persuasão do neuromarketing, os gatilhos mentais, recursos que ativam ações no nosso cérebro. Aprenda a implementar isso no seu negócio.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/12140601/carreira-de-desenvolvedor-de-aplicativos-como-comecar-400x280.png)  [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 

     9 anos atrás

    ##  [ Carreira de desenvolvedor de aplicativos: como começar ](https://www.treinaweb.com.br/blog/carreira-de-desenvolvedor-de-aplicativos-como-comecar) 

     Saiba como se tornar um desenvolvedor de aplicativos reconhecido pelo mercado.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/03155235/GERENCIADOR-DEPENDÊNCIAS-400x280.png)  [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 

     7 anos atrás

    ##  [ O que é gerenciador de dependências? ](https://www.treinaweb.com.br/blog/o-que-e-gerenciador-de-dependencias) 

     Uma ferramenta que facilita a vida do desenvolvedor e o auxilia no gerenciamentos das bibliotecas utilizadas no projeto que estiver trabalhando.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/BFF-400x280.jpg)  [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 

     4 anos atrás

    ##  [ O que é BFF? ](https://www.treinaweb.com.br/blog/o-que-e-bff) 

     Conheça neste artigo o pattern arquitetural BFF (Backend For Frontend).

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/05114857/ORLEANS-400x280.png)  [ Infraestrutura e Sistemas Operacionais ](https://www.treinaweb.com.br/blog/categoria/infraestrutura-e-sistemas-operacionais) 

     9 anos atrás

    ##  [ Conhecendo o Microsoft Orleans ](https://www.treinaweb.com.br/blog/conhecendo-o-microsoft-orleans) 

     Conheça o framework Microsoft Orleans e veja como ele tenta resolver o "problema" dos sistemas distribuídos.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/busca-laravel-scout-algolia-400x280.jpg)  [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 

     10 anos atrás

    ##  [ Full Text Search com Laravel, Scout e Algolia ](https://www.treinaweb.com.br/blog/full-text-search-com-laravel-scout-e-algolia) 

     Aprenda como realizar buscas textuais rápidas e eficientes independentemente da quantidade de registros, campos ou tamanhos de textos.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/ZERO-DAY-400x280.png)  [ Segurança da Informação ](https://www.treinaweb.com.br/blog/categoria/seguranca-da-informacao) 

     7 anos atrás

    ##  [ Termos comuns de segurança: Zero-day ](https://www.treinaweb.com.br/blog/termos-comuns-de-seguranca-zero-day) 

     Confira neste artigo o que é uma falha zero-day e como essas brechas são exploradas.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/03104651/PHP-PSR4-400x280.png)  [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 

     7 anos atrás

    ##  [ PSR-4 a recomendação de autoload do PHP ](https://www.treinaweb.com.br/blog/psr-4-a-recomendacao-de-autoload-do-php) 

     Nesse artigo falaremos de umas das PSRs mais importantes da linguagem PHP, a PSR-4, responsável por recomendações de autoload na linguagem. Venha conferir!!!

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/06/18155804/sistemas-operacionais-400x280.png)  [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 

     7 anos atrás

    ##  [ Concorrência, Paralelismo, Processos, Threads, programação síncrona e assíncrona ](https://www.treinaweb.com.br/blog/concorrencia-paralelismo-processos-threads-programacao-sincrona-e-assincrona) 

     Concorrência, paralelismo, processos, threads, programação síncrona e assíncrona, são assuntos que permeiam o dia a dia dos desenvolvedores. A ideia desse artigo é descomplicar um pouco o que esses conceitos significam e como eles se relacionam.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/17130351/HTTPS-DEV-TEST-400x280.png)  [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 

     7 anos atrás

    ##  [ Automatizando a geração de certificados SSL locais para ambientes de desenvolvimento ](https://www.treinaweb.com.br/blog/automatizando-a-geracao-de-certificados-ssl-locais-para-ambientes-de-desenvolvimento) 

     Veja como automatizar a geração de certificados SSL e usar no servidor do seu ambiente de desenvolvimento.

     Ler artigo

## Um ano de acesso total para você viver de programação.

 Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho.

- **1 ano** de acesso a **todos os cursos**
- Cursos novos **toda semana**
- Suporte **direto com professores**
- Plano de carreira **personalizado**
- **Certificados digitais** inclusos
- **Aplicativos** para Android e iOS, com **acesso offline**

    **Garantia incondicional de satisfação** 

 Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.

### Acesso completo a todos os cursos e dezenas de Formações.

 12 meses 

  Economize R$ 840,00  54% OFF 

 de 12x R$ 129,00 por apenas

 12x  R$ 59,00

 sem juros no cartão de crédito ou R$ 599,00 à vista

  Oferta termina em  **00h 53min 41s**

- Acesso imediato e ilimitado durante 1 ano.
- Plano de carreira personalizado.
- Suporte direto com professores.
- E muito mais!

 [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)

     [                ](https://www.treinaweb.com.br)

 Escola online de programação, tecnologia e IA.

- [  ](https://www.facebook.com/TreinaWeb/)
- [  ](https://www.instagram.com/treinaweb/)
- [  ](https://www.youtube.com/user/TreinaWeb)
- [  ](https://twitter.com/treinaweb)
- [  ](https://www.linkedin.com/company/treinaweb)
- [  ](https://github.com/treinaweb)

## Inscreva-se em nossa newsletter

Receba lançamentos, promoções e novidades.

   Seu nome     Seu WhatsApp     Seu melhor e-mail   Inscrever-se 

## Cursos

- [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs)
- [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end)
- [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end)
- [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile)
- [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados)
- [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing)
- [ IA ](https://www.treinaweb.com.br/categoria/ia)
- [ E mais ](https://www.treinaweb.com.br/categoria/e-mais)
- [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos)

## Conteúdo

- [ Formações ](https://www.treinaweb.com.br/formacoes)
- [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos)
- [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto)
- [ Planos ](https://www.treinaweb.com.br#assinatura)
- [ Depoimentos ](https://www.treinaweb.com.br#depoimentos)
- [ Comunidade ](https://www.treinaweb.com.br#comunidade)
- [ Corpo docente ](https://www.treinaweb.com.br#docente)

## A empresa

- [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre)
- [ Perguntas frequentes ](https://www.treinaweb.com.br#faq)
- [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb)
- [ Cursos para empresas ](https://www.treinaweb.com.br/empresas)
- [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
- [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco)
- [ Artigos ](https://www.treinaweb.com.br/blog)
- [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers)
- [ Contato ](https://www.treinaweb.com.br/contato)
- [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade)
- [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso)

## Baixe nosso aplicativo

 [   Disponível na **App Store**  ](https://apps.apple.com/us/app/treinaweb/id1322729447) [   Disponível no **Google Play**  ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) 

  Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200   © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58